我有一些很好的jQuery UI拖放功能。一般来说，我对jQuery和Javascript都很陌生，我有一个问题。当我的项目被放置在可放置区域内时，我想更改元素。
我的元素是一个文本框，当它被删除时，我想添加：
-
"点击"功能。"单击时"应打开一个模式，允许 用户使文本框是否需要。
-
我想在文本框中添加一个"删除"按钮。此删除按钮 应从可放置区域中删除文本框。
-
将 ID 设置为文本框
该项目是用 ASP.Net/C# 制作的，因此如果需要，我可以使用它。
我希望我能清楚地说明我在寻找什么。这一切都需要在"掉落"事件上触发......谢谢。
$(document).ready(function () {
$(".drag li").each(function () {
$(this).draggable({
helper: 'clone',
cursor: 'move'
});
});
$(".droppable").droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
accept: ":not(.ui-sortable-helper)",
drop: function (event, ui) {
$(ui.draggable).clone(true, true).appendTo(this);
}
}).sortable({
connectWith: ".droppable",
items: "li:not(.placeholder)",
sort: function () {
$(this).removeClass("ui-state-default");
}
});
});<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Create New Form - Big Mouth Messenger</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.0.js" integrity="sha256-wPFJNIFlVY49B+CuAIrDr932XSb6Jk3J1M22M3E2ylQ=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
</head>
<body>
<table>
<tr>
<td id="dragbox" style="width: 50%; height: 100%; margin-left: 10px; vertical-align: top">
<ul class="drag" style="list-style-type: none; width:100%; padding:20px 0px; margin:10px auto;">
<li class="draggable" style="list-style-type: none; margin: 5px"><div style="margin-right: 25px"><h1 id="header">Headline</h1></div></li>
<li class="draggable" style="list-style-type: none; margin: 5px"><div style="margin-right: 25px"><input id="textbox" type="text" class="form-control" style="width: 300px" /></div></li>
<li class="draggable" style="list-style-type: none; margin: 5px"><div style="margin-right: 25px"><input type="checkbox" value="Checkbox" /> Checkbox</div></li>
<li class="draggable" style="list-style-type: none; margin: 5px"><div style="margin-right: 25px"><input type="radio" value="Radiobutton" /> Radiobutton</div></li>
<li class="draggable" style="list-style-type: none; margin: 5px"><div style="margin-right: 25px"><select class="form-control" style="width: 300px"><option>item 1</option><option>item 2</option></select></div></li>
<li class="draggable" style="list-style-type: none; margin: 5px"><div style="margin-right: 25px"><input type="button" value="Button" class="form-control" style="width: 100px" /></div></li>
</ul>
</td>
<td id="dropbox" style="width: 50%; height: 100%; border: 2px solid gray; vertical-align: top">
<ul class="droppable" style="list-style-type: none; width:100%; height: 100%; margin:10px auto;">
</ul>
</td>
</tr>
</table>
</body>
</html>首先，我可以在您的 html 中看到的是，元素被拖入的不是text而是li。在你的所有li中，你都有不同的元素。所以你要做的是从你身上找到正确的元素，然后剩下的就掉下来了。
drop: function (event, ui) {
var li = $(ui.draggable).clone();
var textBox = $(li).find("input[type='text']");
$(textBox).attr("id", "yourIdHere"); // #3 add Id to textBox
if ($(textBox).length > 0) {
$(textBox).click(function () {
// #1: write the code to handle the click here
});
}
//#2: Add button like following
var button = ["<button type='button' onclick='removeText(" +this+");'>Remove</button>"];
li.append(button);
li.appendTo(this);
}
然后定义以下函数-
function removeText(li) {
//write the code to find and remove `textbox` from `li`
}
根据您的方案更新上面的代码，事情应该可以正常工作。
代码可能有一些错误，因为我只是输入它并且没有运行。但它肯定会给你一个好主意。