Question

我正在尝试使用jQuery UI构建一个谜题。我有部分拼图，＃splinter和一个容器#vase来定位它：

<div id="vase">
    <div id="target"></div>
</div>
<div class="splinter splinter-1" data-target-x="53" data-target-y="90">
    <img src="splinter-1.png" />
</div>

我使用部件的数据属性来设置droppable的位置。这是有效的，但snaparea没有重新计算。这些部件会紧贴到最初定位的区域。

$('.splinter').draggable({
revert: 'invalid',
snap: '#target',
snapMode: 'inner',
start: function (event, ui){
    var $target = $('#target');
    $('#vase').append($target);
    $this = $(this);
    $('#target').droppable('destroy').droppable({
        accept: '.splinter'
    });
    $target.css({
        width: $this.width(),
        height: $this.height(),
        left: parseInt($this.attr('data-target-x')),
        top: parseInt($this.attr('data-target-y'))
    });
    $this.draggable('option', 'snap', '#target');
},
stop: function (event, ui){
    $this = $(this);
    $this.draggable('destroy');
}
});

修改

我发现如果我拖动一个元素并再次释放它然后将它拖到捕捉div，它就可以了。当然我必须为此禁用恢复选项。有人有过这种行为吗？

由于

的Lukas

Answer 1

您可能需要使用refreshPositions：true。虽然它在性能上很糟糕，所以你很可能想在每次掉落/移动时设置和重置它。

$('.splinter').draggable({refreshPositions:true,...});

另一个问题，我猜你在某些时候会有很多拼图。 jQuery拖放不能很好地处理这个问题。您可能希望查看一些允许您通过拖放操作使用事件委派的插件。

您可以通过设置点击（或其他一些事件）的位置来做得更好：

$('.splinter').click(function(){...set css position...}).draggable(...);

这将解决在调用“start”之前计算位置的任何问题，这是您更改目标可放置位置的位置。

Answer 2

问题在于执行回调函数的顺序。在计算快照元素位置后调用“开始”回调函数。我在这个回调中重新定位了#target div。这就是我解决这个问题的方法：

$('.splinter').mousedown(function(){
    var $target = $('#target');
    //$('#vase').append($target);
    $this = $(this);
    $target.css({
        width: $this.width(),
        height: $this.height(),
        marginLeft: parseInt($this.attr('data-target-x')),
        marginTop: parseInt($this.attr('data-target-y'))
    });
});

而不是回调函数，我为在可拖动的click事件之前触发的mousedown事件绑定。

可拖动和Droppable动态定位

2 个答案: