以下代码用于嵌套滑动/拖动，父级和子级都是可拖动的。
P1... 它工作得很好，但有一个可爱的问题，如果我们单独拖动父级，它就会完美地工作。但是当我们拖动可拖动子级时，父级也会被自动拖动... Jsbin for P1...
P1... 是由“.closest('.'+ mainElem[0].className)”引起的； 如果我删除它，那么 parent 在拖动 child 时就不会被拖动，“””产生另一个问题。
............那就是......
P2... 如果我们单击任何不可拖动的子级假设文本，则可拖动的父级不会移动。 ...并且...如果我们单击三行菜单按钮，那么它将被拖动，而不是其可拖动父级... Jsbin for P2...
$.fn.on_swipe = function(o) {
var te = {};
this.each(function(){
var mainElem = $(this);
$(document).on('mousedown', function(e) {
e.preventDefault();
te.target = $(e.target).closest('.'+ mainElem[0].className);
te.bX = e.pageX;
te.lastX = te.target.position().left;
$(this).on('mousemove', function(e) {
te.eX = e.pageX;
te.posX = te.lastX + ( -1 * (te.bX - te.eX));
o.moving(te.target, te.posX);
}).on('mouseup', function(e) {
te = {};
$(this).unbind('mousemove');
$(this).unbind('mouseup');
});
});
});
};
$('.parent').on_swipe( { moving: function(target, posX) {
target.css( 'left' , posX + 'px');
} });
$('.child').on_swipe( { moving: function(target, posX) {
target.css( 'left' , posX + 'px');
} });
谢谢:)
最佳答案
解决了您的P1...和P2..问题
1) 将文档中的“mousedown”点击更改为其初始化的实际元素。
2) 添加了“stopPropagation()”，以便在拖动子级时不拖动父级
3) 从初始化元素中删除“mouseup”事件并将其添加到文档中
已更新jsbin P1
如果您有任何其他问题，请告诉我
更新:根据评论中的 @kanudo 请求添加 jsbin
更新:最终正确 ..JSBIN..
关于javascript - 使用 jQuery 嵌套拖动、滑动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31942078/