拖放：Draggable追加到droppable

我有一個項目http://jsfiddle.net/x5T4h/566/。拖放：Draggable追加到droppable

HTML：

<div class="dropable base"> 
    <div class="draggable">Div1</div> 
    <div class="draggable">Div2</div> 
    <div class="draggable">Div3</div> 
    <div class="draggable">Div4</div> 
</div> 

<div class="places"> 
    <div class="droppable">Move here div</div> 
    <div class="droppable">Move here div</div> 
    <div class="droppable">Move here div</div> 
    <div class="droppable">Move here div</div> 
</div>

jQuery用戶界面：

$('.droppable').droppable({ tolerance: "touch" }); 
$('.draggable').draggable({ revert: "invalid" }); 
$('.base').droppable();

我想：

請拖動附加當它下降到可棄。我試圖使用助手和appendTo函數，但它不工作，我尋找。我想讓可拖動的可拖動的相同位置和可放大的（例外類別.base）大小相同。它應該看起來像可拖動的在相同位置放置。我嘗試了一切。
只有一個可拖動的可拖放到一個拖放。

我嘗試了一切，但它仍然沒有像我預期的那樣工作。

來源

2017-03-09 UsopleskCz

您是否希望拉出的可拖動的「插槽」保留下來？是否應該將被丟棄的元素再次拖動？目前還不清楚你想要發生什麼。 – Twisty

有很多方法可以做到這一點，並不完全清楚你在你的問題中尋找什麼。這裏我的建議。

工作實例：http://jsfiddle.net/Twisty/x5T4h/568/

的JavaScript

$(function() { 
    $('.droppable').droppable({ 
    tolerance: "touch", 
    drop: function(e, ui) { 
     $(this).append(ui.draggable); 
     $(this).find(".draggable").css({ 
     position: "absolute", 
     top: 0, 
     left: 0, 
     margin: "-1px", 
     width: $(this).width() + "px" 
     }); 
     $(e.target).droppable("disable"); 
    } 
    }); 
    $('.draggable').draggable({ 
    revert: "invalid", 
    zIndex: 1000 
    }); 
    $('.base').droppable(); 
});

希望有所幫助。

來源

2017-03-10 23:02:48 Twisty

拖放：Draggable追加到droppable

回答

相關問題