draggable div问题

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'）但没有运气。我希望得到任何帮助 这里是我的div

<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格是你rd_main
div的第一个孩子。

任何方式你为什么不使用JQuery的可拖动而不是自己的功能？ http://jqueryui.com/demos/draggable/#handle