我试图使可拖动的物体从远处彼此对齐.
它已经完成但是不起作用的是如果你仔细观察这个例子,那么助手就会向后移动……如果你把它移动1个像素,那么帮助者将会转到-1,你是…而且只有下一个移动是你的鼠标所在:(
希望你明白HERE IS A WORKING CODE (DEMO)
任何想法有什么问题吗?
我认为问题出在这一部分,但我不知道如果没有这个错误会改变什么:
drag: function(event, ui) { drawGuideLines($(this)); },
start: function(event, ui) { removeAlignLines($(this)); },
stop: function(event, ui) {
rebuildAlignLines($(this));
linesTimeout = setTimeout("hideGuideLines()", 100);
},
最佳答案 听起来像一个bug,在最后一次移动后没有调用拖动事件.如果用户快速移动鼠标,则问题非常明显.
作为解决方法,您可以在拖动时间内设置间隔函数并每隔100ms绘制一次网格线:
更新jsbin:http://jsbin.com/oqohuq/4/edit
var handleInterval = null;
$(".draggable").draggable({
opacity : 0.35,
handler : "._header",
stack : ".draggable",
grid: [1, 1],
refreshPositions: true,
snap: ".drag_alignLines", // Setting snap to alignment lines
snapTolerance: 10,
snapMode: "inner",
drag: function(event, ui) { drawGuideLines($(this)); },
start: function(event, ui) {
//Init the interval here
var self = $(this);
handleInterval = setInterval(function(){ drawGuideLines(self);},100);
removeAlignLines($(this)); },
stop: function(event, ui) {
//Clear interval here
clearInterval(handleInterval);
rebuildAlignLines($(this));
linesTimeout = setTimeout("hideGuideLines()", 100);
}//Don't forget to remove the last coma!
});