在父级上拖动时移动子级的Javascript

唤醒

我想在拖动父元素和元素本身时移动子元素，并且不应该移动父元素。
这是我的演示，
就像在演示中一样，我想在拖动红色框或在其父级（背景）上拖动时移动红色框，但是我无法计算出正确的位置，您能帮我吗？
另一个问题是，为什么我不能off在mousemove event当我设置.off('mousemove', mousemove')
非常感谢

托马西托665

我做了一些改变。这有效;）

演示

$(function(){
  var graph = $('.graph')[0];
  var parent = $(graph).parent();

  var lockX = 0;
  var lockY = 0;

  var mousemove = function(e){
        $(graph).offset({
            top: e.pageY + lockY,
            left: e.pageX + lockX
        });
    };

  parent.on('mousedown', function(e) {
        lockY = $(graph).offset().top - e.pageY;
        lockX = $(graph).offset().left - e.pageX;

        $(this).addClass('draggable')
          .on('mousemove', mousemove)
          .on('mouseup', function(){
            $(this).off('mousemove', mousemove)
        })

        event.preventDefault()
    });

    $('.graph').parent().on('mouseup', function(e) {
        $('.draggable')
            .off('mousemove', mousemove)
            .removeClass('draggable');
    });
});

编辑

我做出的唯一实际更改是：

.offset({
    // instead of: e.pageY - $('.draggable').outerHeight() / 2 + dtop
    top: e.pageY + dtop,

    // instead of: e.pageX - $('.draggable').outerWidth() / 2 + dleft
    left: e.pageX + dleft
})

PS：在JS小提琴我的例子中改变dleft并dtop分别lockX和lockY。当然，那是纯粹的语义问题。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。