Question

我发现这个函数使我的div可拖动，并且工作正常。现在，如果我将鼠标放在div上的任何地方它会拖动，但我只想让它拖动div，如果我的鼠标在rd_header div上。这是函数

        var makeDraggable = function(element) {

            element = jQuery(element);
            var move = function(event) {
                if(element.data('mouseMove')) {

                    var changeX = event.clientX - element.data('mouseX');
                    var changeY = event.clientY - element.data('mouseY');

                    var newX = parseInt(element.css('left')) + changeX;
                    var newY = parseInt(element.css('top')) + changeY;

                    element.css('left', newX);
                    element.css('top', newY);

                    element.data('mouseX', event.clientX);
                    element.data('mouseY', event.clientY);
                }
            }

            element.mousedown(function(event) {
                element.data('mouseMove', true);
                element.data('mouseX', event.clientX);
                element.data('mouseY', event.clientY);
            });

            element.parents(':last').mouseup(function() {
                element.data('mouseMove', false);
            });

            element.mouseout(move);
            element.mousemove(move);
        }

我用这个叫

makeDraggable(jQuery('#rd_main'));

我尝试在标题div上调用iot而不是更改函数变量元素。到element.closest（'div'）但没有运气。我将不胜感激任何帮助这是我的divs

<div id="rd_main">
    <div class="rd_header">Action Log</div>
    <div id="rd_logdiv" class="sb"></div>
</div>

Answer 1

makeDraggable('#rd_main', 'rd_header');

然后用这个更新你的功能：

var makeDraggable = function(element, triggerClass) {
    element = $(element);

    var move = function(event) {
            if (element.data('mouseMove') && isAvailable) {
                var changeX = event.clientX - element.data('mouseX');
                var changeY = event.clientY - element.data('mouseY');

                var newX = parseInt(element.css('left')) + changeX;
                var newY = parseInt(element.css('top')) + changeY;

                element.css('left', newX);
                element.css('top', newY);

                element.data('mouseX', event.clientX);
                element.data('mouseY', event.clientY);
            }
        },
        isAvailable = false;

    element.mousedown(function(event) {
        var target = $(event.target);

        isAvailable = target.hasClass(triggerClass) || target.closest('.' + triggerClass); //Check if we over wanted element
        element.data('mouseMove', true);
        element.data('mouseX', event.clientX);
        element.data('mouseY', event.clientY);
    });

    element.parents(':last').mouseup(function() {
        element.data('mouseMove', false);
    });

    element.mouseout(move);
    element.mousemove(move);
}

Answer 2

尝试使用element.children().first()，因为rd_header div是您rd_main的第一个孩子格。

为什么不使用Jquery draggable而不是你自己的函数？ http://jqueryui.com/demos/draggable/#handle

可拖动的div问题

2 个答案: