jquery可拖動元素不再拖放後可以拖動

當拖動圖像時，它被克隆成功 - 即原始圖像保持放置狀態，並且克隆很好地落入其新位置，但舊圖像不再可拖動。檢查元素顯示class作爲屬性（沒有值），即不是class="ui-draggable"

正如你會看到我試圖重新啓用克隆後可拖動到原來的，但它不工作。

下面的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> 
    <title></title> 
    <script language="javascript" type="text/javascript"> 
    var copy = 0; 
    var dragOptions = { 
     helper: 'clone', 
     cursor: 'hand', 
     revert: 'invalid' 
    }; 
    $(document).ready(function() { 
     $("img").draggable(dragOptions); 
     $("ul#bag > li").droppable({ 
     drop: function (event, ui) { 
      copy++; 
      var clone = $(ui.draggable).clone().attr("id", "img_" + copy); 
      $(this).append(clone); 
      clone.css("left", 0).css("top", 0); 
      $(ui.draggable).draggable(dragOptions); 
     } 
     }); 
    }); 
</script> 
    <style type="text/css"> 
    li 
    { 
     position: relative; 
     float: left; 
    } 

    img 
    { 
     cursor: move; 
    } 

    div, li 
    { 
     display: block; 
     width: 160px; 
     height: 123px; 
     margin: 2px; 
     border: solid 1px gray 
    } 

    .clear 
    { 
     clear: both; 
    } 
    </style> 
</head> 
<body> 

    <ul id="bag"> 
    <li></li> 
    <li></li> 
    <li></li> 
    </ul> 

    <ul id="shop"> 
    <li><img id="img1" src="images/p1.jpg" /></li> 
    <li><img id="img2" src="images/p2.jpg" /></li> 
    <li><img id="img3" src="images/p3.jpg" /></li> 
    </ul> 

    <div class="clear" id="dustbin" style="background-color:Black;"></div> 
</body> 
</html>

來源

2011-02-16 jenson-button-event

因此，它似乎一旦該項目被拖動，可拖動窗口小部件調用自身的破壞（）函數將刪除元素draggability的任何假象。

與期權或事件重寫此的沒有明顯的辦法，我已經與蠻力中的document.ready重寫它：

$ .ui.draggable.prototype.destroy =功能（UL，項目）{ };

現在可以工作。

來源

2011-02-17 09:23:07

感謝您找出解決方案。 – Couto 2011-02-20 21:57:48

這對我來說沒有任何改變，事實上一些簡單的測試表明，destroy方法從來不會被放在drop上。 – 2012-11-14 07:41:02

感謝您找出解決方案。不過，我真的需要銷燬方法...所以在使用你的解決方案後，我將本地銷燬方法分配給另一種方法...所以你的解決方案將是這樣的;

$.ui.draggable.prototype.destroy = function (ul, item) { }; 
$.ui.draggable.prototype.remove = function() { 
    if(!this.element.data('draggable')) return; 
    this.element 
     .removeData("draggable") 
     .unbind(".draggable") 
     .removeClass("ui-draggable" 
      + " ui-draggable-dragging" 
      + " ui-draggable-disabled"); 
    this._mouseDestroy(); 

    return this; 
};

來源

2011-02-20 22:04:58 Couto

我知道這是舊的，但希望提供另一種解決方案，以那些需要保持.destroy並想保持相同的名稱。

我做出了draggable狀態適用於某個元素的功能...

function MakeDraggable(ele) { 
    ele.draggable({ revert: "invalid" }); 
}

然後.droppable元素的drop財產裏面我只是...

MakeDraggable(ui.draggable);

這種再 - 使能元素的可拖動狀態。

來源

2012-07-21 23:06:34 Jared

jquery可拖動元素不再拖放後可以拖動

回答

相關問題