拖放不屬於同一容器的元素

Question

我想將克隆元素id =“ btn”拖放到div類=“ ui-layout-content”中。 我可以將元素從一個div拖放到容器下的另一個div。 但是我不能在不屬於同一容器的分區之間進行相同的操作。 這是我的代碼：

<div class="ui-layout-west">
  <h3 class="hdr">Drag and Drop Toolbar</h3>
  <div class="ui-layout-content">
    <div id=“btn”>button</div>
  </div>
</div>

<div id="mainContent">
  <div class="ui-layout-center">
    <h3 class="hdr">Design Area</h3>
    <div class="ui-layout-content">

    </div>
  </div>
</div>

Answer 1

使用jQuery UI Draggable，您可以得到以下內容：

var is_Over_Right_Element = false;
$( "#dropHere" ).mouseover(function() { 
    is_Over_Right_Element = true;
});

Answer 2

將div元素上的位置設置為“可拖動”的絕對位置。

要么

將另一個窗口設置為新的父元素。

$("#btnCLONE").appendTo("#someOtherDiv");

如果一切都失敗了。 將兩個區域都放入一個大的“可拖動”容器中，並添加一個mouseover事件偵聽器，以檢查您是否將鼠標懸停在正確的區域上，以便能夠將克隆放入其中。

    var is_Over_Right_Element = false;
    $( "#dropHere" ).mouseover(function() { 
        is_Over_Right_Element = true;
    });