我想在拖动父元素和元素本身时移动子元素,并且父元素不应该被移动。
这是我的demo
正如在演示中一样,我想在拖动红色框或拖动其父级(背景)时移动红色框,但我无法计算正确的位置,你能帮我吗?
另一个问题是为什么当我设置 .off('mousemove', mousemove')
时我无法关闭
mousemove事件
非常感谢
最佳答案
我做了一些改变。这有效;)
DEMO
$(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 Fiddle的示例中,我将dleft
和dtop
分别更改为lockX
和lockY
。当然,这是纯粹语义上的事情。
关于拖动父级时Javascript移动子级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36619663/