Drag，Drop和Append不正確定位div元素

我有兩個div元素。我想拖動第一個div然後想要拖放並將其附加到另一個div。拖動工作正常，但是當我放下第一個div時，它會跳出目標div區域。我不希望它超出目標區域。這裏是代碼Drag，Drop和Append不正確定位div元素

<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> 
    <script> 
    $(function() 
    { 
     $("#x").draggable(); 
     $("#y").draggable().droppable(
     { 
      drop: function(event,ui) 
      { 
       $(this).append($(document.getElementById("x"))); 
      } 
     }); 
    }); 
    </script> 

    </head> 
    <body> 

     <div id="y" style="width:300px;height:300px;background:#89A94B;" ></div> 
     <div id="x" style="width:200px;height:200px;background:#50555B;" ></div> 

    </body>

這裏是演示jsfiddle 請幫助。

來源

2014-08-28 Swapnil

我剛剛調整您的小提琴一點：Drag and Drop

$("#x").draggable({ 
revert: 'invalid' 
}); 


$("#y").droppable({ 
accept: '#x', 
tolerance: 'fit', 
drop: function (event, ui) { 
    // do stuff 
    } 
});

不知道你想要的情況下發生的#X放置＃Y之外的東西 - 我只是用選項revert: 'invalid'對於#x，#x在成功丟棄時保留在#y內，和對於dropzone #y的選項tolerance: 'fit'，因此如果#y不完全位於#y內，#x將不會保留在#y內。

更新：增加了第二個版本。現在#x被附加爲#y的子項，並且使用CSS放置在#y中間的，覆蓋可拖動的可放置UI的設置。因爲它不是完全清楚需要什麼，請隨時添加其他評論，但我想大概這就是你要發生的事情：

演示：Appending draggable as child of droppable

調整原來的代碼如下：

$(function() { 
    $("#x").draggable(); 
    $("#y").draggable().droppable({ 
    drop: function (event, ui) { 
     $(this).append($("#x")); 
     $("#x").draggable('disable'); 
    } 
    }); 
});

#x現在被附加到#y，此外，當#x被丟棄時，我禁用draggable（）爲#x。

CSS：

#y { 
overflow:hidden; 
} 
#y #x { 
    background:red !important; 
    position:absolute !important; 
    top:0 !important; 
    left:0 !important; 
    margin-left: 25px !important; 
    margin-top: 25px !important; 
}

當#x是附加到＃Y，我將背景設置爲紅色並重寫UI設置，只需在#y的中間定位#X。另外，我設置了#y overflow：hidden;這是由於UI設置的主要問題 - 它可能只是調整UI CSS，但認爲這可以通過一些額外的CSS來完成，比如建議。當overflow：hidden時，當#y被追加到#y中時，你不會看到任何在#y之外顯示的#x的東西 - 就像你的問題中的小提琴一樣。可以編寫一個正確定位的函數，但由於我不確定結果應該是什麼樣子，並且您只需要將放下的div留在dropzone內，這可以符合您的要求，您可以調整CSS來獲得你正在尋找的結果。

來源

2014-08-28 19:09:42

謝謝，但#x不會附加到#y。 #x應該是#y的孩子。請在**/do stuff區域**編寫附加代碼並嘗試。它不會工作.. [鏈接]（http://jsfiddle.net/fw69g0ef/3/） – Swapnil 2014-08-29 04:33:25

@ user2013766剛剛在我的答案中添加了第二個版本，也許這是匹配你正在尋找的結果。 – 2014-08-29 18:39:14

Drag，Drop和Append不正確定位div元素

回答

相關問題