jquery sürüklenebilir öğe artık bırakıldıktan sonra artık sürüklenemiyor

Aynı kaynak öğesini tekrar tekrar sürükleyip bırakabilmek istiyorum.jquery sürüklenebilir öğe artık bırakıldıktan sonra artık sürüklenemiyor

Bir görüntünün sürüklendiği anda, başarılı bir şekilde klonlanır - bu orijinal görüntü kalıyor ve klon yeni yerine güzel bir şekilde düşer, ancak eski görüntü artık sürüklenemez. Öğenin incelenmesi class="ui-draggable"class="ui-draggable"

Bir öznitelik olarak class değerini gösterir. Görüldüğü gibi, kopyalanmadan sonra yeniden sürüklenmeyi yeniden etkinleştirmeyi denedim, ancak çalışmaz.

<!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>

kaynak

2011-02-16 jenson-button-event

Yani, madde sürüklenen bir kez, sürüklenebilir Widget öğesinden draggability herhangi bir görünüş kaldırır kendi yok() işlevini çağırır anlaşılmaktadır:

İşte kod. seçenekler veya olaylarla bu ağır basan hiçbir fark edilebilir şekilde birlikte

, ben document.ready kaba kuvvet ile geçersiz kıldık:

$ .ui.draggable.prototype.destroy = function (ül, öğesi) { };

Bu şimdi çalışır.

kaynak

2011-02-17 09:23:07

Çözüm oluşturduğunuz için teşekkür ederiz. – Couto

Bu benim için hiçbir şey değiştirmedi, aslında bazı basit testler, yok etme yönteminin hiçbir zaman damla olarak çağrıldığını gösteriyor. –

Çözüm oluşturduğunuz için teşekkür ederiz. Ancak gerçekten imha yöntemine ihtiyacım vardı ... bu yüzden çözümünüzü kullandıktan sonra, yerel yok etme yöntemini başka bir yönteme atadım ... böylece çözümünüz bunun gibi bir şey olurdu;

$.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; 
};

kaynak

2011-02-20 22:04:58 Couto

Bu eski olduğunu biliyorum ama .destroy tutmak için gereken ve aynı adı tutmak istiyorum olanlara başka bir çözüm sunmak istedik. Bir elemana draggable durumunu uygulamak için bir işlevi yapılan

... .droppable elemanlarının drop özelliğinin içindeki Sonra

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

Ben sadece ...

MakeDraggable(ui.draggable);

Bu yeniden sürüklenebilir durumu öğeye bağlar.

kaynak

2012-07-21 23:06:34 Jared

Neden sadece (sürüklenebilir) .draggable(); senin damlanın içinde? Bu, çözümünüzle tam olarak aynı şekilde çalışır, ancak birkaç satır daha azdır. –

jquery sürüklenebilir öğe artık bırakıldıktan sonra artık sürüklenemiyor

cevap

İlgili konular