这是尝试解决拖动元素与网格对齐的问题(我在之前的问题中概述了这个问题-
Getting jQuery draggable to snap to specific grid)
到目前为止,我已经确定问题是jQuery在调用.draggable()时计算元素的位置,并相对于元素创建网格,而不是相对于元素的父元素(这将更多)直观).
在以下解决方案中,我们看到3个框:
> Box 1从0,0开始,因此将与父元素的网格对齐.
> Box 2从与网格不对齐的点开始,因此在拖动时永远不会与其对齐.
>框3也从与网格不对齐的点开始,但在这种情况下,我们捕获鼠标按下事件,并将元素重新定位到最近的网格点,然后才调用draggable().
选项3可以工作,因为元素现在将与网格对齐.问题是,它需要两个鼠标事件:一个用于重新定位元素,并且只有在下一个mousedown事件(在它变为黄色之后)才会实际拖动.
我怎样才能重做这个元素,以便可以重新定位元素,然后调用.draggable(),只需一个mousedown事件?
JS:
$('#Box-1').draggable({ grid: [ 20,20 ] }); $('#Box-2').draggable({ grid: [ 20,20 ] }); var isDraggable = false; $('#Box-3').mousedown(function(e){ console.log('MOUSE DOWN'); if (isDraggable == false) { var $this = $(this); // Reposition to nearest grid position: currentX = parseInt($this.css('left')); currentY = parseInt($this.css('top')); nearestGridX = Math.round(currentX/20) * 20; nearestGridY = Math.round(currentY/20) * 20; $this.css({left:nearestGridX+'px',top:nearestGridY+'px'}); // Turn yellow: $this.css({background:'yellow'}); // Make draggable: isDraggable = true; $this.draggable({ grid: [ 20,20 ],start: function( event,ui ) { console.log('START'); } }); $this.trigger("mousedown"); } });
解决方法
Live Demo
您可以比我猜想的更容易实现自定义网格功能.这应该简化了一些事情,因为您不必担心重新定位,然后使用jQuery UI的网格.
// Custom grid $('#Box-3').draggable({ drag: function( event,ui ) { var snapTolerance = $(this).draggable('option','snapTolerance'); var topRemainder = ui.position.top % 20; var leftRemainder = ui.position.left % 20; if (topRemainder <= snapTolerance) { ui.position.top = ui.position.top - topRemainder; } if (leftRemainder <= snapTolerance) { ui.position.left = ui.position.left - leftRemainder; } } });
此外,according to Scott Gonzalez,网格选项将在未来消失,因为它是一种微不足道的独立实现,所以这也为你的未来做好了准备.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。