相关疑难解决方法(0)

我有两个容器.缩略图容器和"页面"容器.两者都是div.可以在两个容器之间来回拖动缩略图.我已将缩略图设置为"无效",因此如果它们被丢弃到其中任何一个容器外,它们会快速回到其中一个容器中.

缩略图必须捕捉到"页面"容器内的20x20网格.这是客户端客户端可以将缩略图放在任何地方的"页面"容器中,但仍然可以整齐地排列它们.

问题是可拖动的'网格'选项似乎不适合这个.当您开始拖动时,"网格"似乎由可拖动位置确定,而不是表现为该页面具有可以捕捉到的真实网格.

有没有办法解决这个问题,因此网格基于"页面"容器,而不是拖动它时拖动的位置？

这是尝试解决拖动元素与网格对齐的问题(我在之前的问题中概述了这一点 - 让jQuery可拖动以捕捉到特定网格)

到目前为止,我已经确定问题是jQuery在.draggable()被调用的时刻计算元素的位置,并相对于元素创建网格,而不是相对于元素的父元素(这将更直观).

在以下解决方案中,我们看到3个框:

• 方框1从0,0开始,因此将与父元素的网格对齐.
• 方框2从与网格不对齐的点开始,因此在拖动时永远不会与其对齐.
• 框3也从与网格不对齐的点开始,但在这种情况下,我们捕获鼠标按下事件,并将元素重新定位到最近的网格点,然后才调用draggable().

选项3可以工作,因为元素现在将与网格对齐.问题是,它需要两个鼠标事件:一个用于重新定位元素,并且只有在下一个mousedown事件(在它变为黄色之后)才会实际拖动.

我怎样才能重做这个元素以便元素可以重新定位然后.draggable()调用它,所有这些都只有一个mousedown事件？

http://jsfiddle.net/8RnBf/34/

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: …