jQuery UI-拖放后无法拖动 [英] jQuery UI - Draggable not working right after dropped

问题描述

HTML:

<div class="character_list">
   <div id="draggable" class="character_list_container">
      <div><img  class="1" src="http://ahna.web44.net//img/charas/13.png" /></div>
      <div><img class="2" src="http://ahna.web44.net//img/charas/13.png" /></div>
      <div><img class="3" src="http://ahna.web44.net//img/charas/13.png" /></div>
      <div><img  class="4" src="http://ahna.web44.net//img/charas/13.png" /></div>
      <div><img class="5" src="http://ahna.web44.net//img/charas/13.png" /></div>
      <div><img class="6" src="http://ahna.web44.net//img/charas/13.png" /></div>
   </div>
   <div id="droppable_slots" class="current_team">
      <div id="slot" class="1">1</div>
      <div id="slot" class="2">2</div>
      <div id="slot" class="3">3</div>
   </div>
</div>​

jQuery:

$(function() {
    $("#draggable>div>img").draggable({
        start: function(){
           $(this).css({display: 'none'});
        },
        stop: function(){
           $(this).css({display: 'block'});
        },
        revert: function(dropped) {
           var dropped = dropped && dropped[0].id== "slot";
           if(!dropped) {
              $(this).appendTo($(this).data('originalParent'))
            }
            return !dropped;
        },
        helper: function() { return $(this).clone().appendTo('body').show(); },
        containment: '.sel_screen_left'
}).each(function() {
    $(this).data('originalParent', $(this).parent())
});

$("#droppable_slots>div").droppable({
    drop: function(event, ui) {

        var $this = $(this);
    var content = $.trim($this.html()).length;
    if(content > 0) {
    $this.html("");
    }
        $this.append(ui.draggable);    

        var width = $this.width();
        var height = $this.height();
        var cntrLeft = (width / 2) - (ui.draggable.width() / 2);
        var cntrTop = (height / 2) - (ui.draggable.height() / 2);

        ui.draggable.css({
            left: cntrLeft + "px",
            top: cntrTop + "px"
        });

}
});
});​

实时示例: http://jsfiddle.net/CVbzg/3/

正如在jsfiddle示例中看到的那样，当拖放图像时，它会完美锁定，但是当您移出拖放区域时，它会失去可拖动性，而不是还原并附加到其原始父项上.

As you can see in the jsfiddle example, when an image is dropped it locks in perfectly however when you move out of the drop zone it loses the draggability rather than reverting and appending to its original parent.

有人可以帮忙吗?

推荐答案

在将可放置对象放置到放置目标中并使其失去可拖动性之后，将其移动一小会儿是因为

When you move the droppable a little bit after it is already placed in the drop target and it loses draggability, it is because of

$this.html("");

在放置处理程序中，可拖动对象仍位于放置目标内.删除放置目标的HTML时，您还将删除应该重新添加的元素.这将返回语法错误，因为该元素不再存在，从而中断了操作，将克隆保留在那里，并且将可拖动的内容删除了.

In the drop handler, the draggable is still inside the drop target. When you erase the drop target's HTML, you also remove the element which is supposed to be re-appended. This returns a syntax error as the element is no longer there which breaks the operation leaving the clone there and the draggable erased.

这是一个快速解决方法:

Here's a quick fix:

drop: function(event, ui) {

    var $this = $(this);
    if ($this.find('.ui-draggable').length) return; //don't overwrite occupied spot
    $this.empty(); //empty() sounds more semantic than html('') for me, it does the same thing =]
    $this.append(ui.draggable);
    //...
}

小提琴

不允许用另一个元素覆盖放置目标内的放置元素，包括在其放置目标上重新放置元素.

It won't allow overwriting a dropped element inside of a drop target by another element, which includes re-dropping elements on their own drop targets.

另一种解决方案是在添加已拖放的可拖动对象之前，将已经拖放的可拖动对象移回其初始位置:

An alternative solution is to move the already dropped draggable back to its starting position before appending the draggable being dropped:

drop: function(event, ui) {
    var $this = $(this),
        containsDropped = $this.find('.ui-draggable');
    if (containsDropped.length) containsDropped.appendTo(containsDropped.data('originalParent'));
    $this.empty();

小提琴

您只需要注意不要意外擦除可拖动对象. =]

You just have to take care to not erase a draggable unintentionally. =]

这篇关于jQuery UI-拖放后无法拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！