Question

I found this function to make my divs draggable and it works fine. right now if i have my mouse anywhere on the div it drags, but i only want it to drag the div if my mouse is on the rd_header div. here is the function

        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);
        }

and i call it with this

makeDraggable(jQuery('#rd_main'));

i tried calling iot on the header div instead and changing the function variables element. to element.closest(‘div’) but had no luck. i would appreciate any help
here is my 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');

Then update your function with this:

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);
}