我在左側有一些可拖動的框。當它們被拖動時，它們會被克隆，因此您可以放置??任意數量的框。
當它們被拖到時，.sortable我希望通過單擊x鏈接將它們洗掉。
<div class="draggable">
<div class="structure">
<div class="item1 e1" data-class="e1" data-parent="w1">New block <a href="javascript:;" class="remove">X</a></div>
<div class="item1 e2" data-class="e2" data-parent="w2">New headline <a href="javascript:;" class="remove">X</a></div>
</div>
</div>
<div class="sortable"></div>
這是我的腳本：
$(".sortable").sortable();
$(".structure .item1").draggable({
connectToSortable: ".sortable",
helper: "clone"
});
$(".remove").on("click", function () {
alert("Hello out there!");
});
不幸的是，這x似乎沒有任何作用。什么都沒發生。你知道我做錯了什么嗎？
在這里你可以找到一個演示https://codepen.io/alphafrau/pen/WNMJpow
uj5u.com熱心網友回復：
$(function() {
$(".sortable").sortable();
$(".structure .item1").draggable({
connectToSortable: ".sortable",
helper: "clone"
});
$(document).on("click", ".remove", function() {
if (confirm("Are you sure you want to remove this element?")) {
$(this).parent().remove();
$(".sortable").sortable("refresh");
}
});
});.item1 {
border: 1px solid #ccc;
width: 150px;
height: 50px;
padding: 0.5em;
}
.sortable {
border: 1px solid #222;
padding: 3px;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<div class="draggable">
<div class="structure">
<div class="item1 e1" data-class="e1" data-parent="w1">New block <a href="javascript:;" class="remove">X</a></div>
<div class="item1 e2" data-class="e2" data-parent="w2">New headline <a href="javascript:;" class="remove">X</a></div>
</div>
</div>
<div class="sortable"></div>這是使用更正的事件委托。
https://api.jquery.com/on/
當
selector提供 a 時，事件處理程式被稱為delegated。當事件直接發生在系結元素上時，不會呼叫處理程式，而只會呼叫與選擇器匹配的后代（內部元素）。jQuery 將事件從事件目標冒泡到附加處理程式的元素（即，從最內到最外的元素），并為沿該路徑匹配選擇器的任何元素運行處理程式。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/495502.html