Jquery调用函数到父元素答案

【问题标题】：Jquery calling function to parent elementJquery调用函数到父元素
【发布时间】：2016-11-19 05:20:10
【问题描述】：

我有这个 html

<div class='Aname'>
    <div class='cllt'>
      <img src='../img/close.png' class='cl' />
      <div class='drag'>
        <img src='../img/dr.png' class='dr' /></div>
    </div>
</div>

还有这个jquery函数

function handle_mousedown(e){
    window.my_dragging = {};
    my_dragging.pageX0 = e.pageX;
    my_dragging.pageY0 = e.pageY;
    my_dragging.elem = this;
    my_dragging.offset0 = $(this).offset();
    function handle_dragging(e){
        var left = my_dragging.offset0.left + (e.pageX - my_dragging.pageX0);
        var top = my_dragging.offset0.top + (e.pageY - my_dragging.pageY0);
        $(my_dragging.elem)
            .offset({top: top, left: left});
    }
    function handle_mouseup(e){
        $('body')
            .off('mousemove', handle_dragging)
            .off('mouseup', handle_mouseup);
    }
    $('body')
        .on('mouseup', handle_mouseup)
        .on('mousemove', handle_dragging);
}

来源How do I make an element draggable in jQuery?; 我已经尝试过这种方式

$('.dr').mousedown(function(){
    $(this).parent().parent().parent(handle_mousedown)
});

但它不会拖它

【问题讨论】：

您希望.parent(handle_mousedown) 做什么？ .parent() 的参数是一个选择器，如果它与选择器匹配，则返回父级。传递函数是没有意义的。
我不知道我还能做什么@Barmar
问题遗漏了一些重要的东西：这段代码应该做什么？
当我在“.dr”上鼠标时，它的父元素“.Aname”应该被拖动
将my_dragging.elem = this 更改为my_dragging.elem = this.parentElement

标签： jquery

【解决方案1】：

为您的函数提供第二个参数，该参数指示应拖动的元素，而不是 this。

function handle_mousedown(e, elem) {
  var my_dragging = {};
  my_dragging.pageX0 = e.pageX;
  my_dragging.pageY0 = e.pageY;
  my_dragging.elem = elem;
  my_dragging.offset0 = elem.offset();

  function handle_dragging(e) {
    var left = my_dragging.offset0.left + (e.pageX - my_dragging.pageX0);
    var top = my_dragging.offset0.top + (e.pageY - my_dragging.pageY0);
    my_dragging.elem
      .offset({
        top: top,
        left: left
      });
  }

  function handle_mouseup(e) {
    $('body')
      .off('mousemove', handle_dragging)
      .off('mouseup', handle_mouseup);
  }
  $('body')
    .on('mouseup', handle_mouseup)
    .on('mousemove', handle_dragging);
}

$('.dr').mousedown(function(e) {
  handle_mousedown(e, $(this).parent().parent().parent());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='Aname'>
    <div class='cllt'>
      <img src='../img/close.png' class='cl' />
      <div class='drag'>
        <img src='../img/dr.png' class='dr' /></div>
    </div>
</div>

【讨论】：