Question

我有一些很好用的jQuery UI拖放功能。一般来说，jQuery和Javascript都是新手，我有一个问题。当我的项目被丢弃在DROPPABLE区域内时，我想更改元素。

我的元素是一个文本框，当它被删除时，我想添加：

“点击”功能。 “点击”应该打开一个允许的模态用户是否需要文本框。
我想在文本框中添加“删除”按钮。这个删除按钮应从DROPPABLE区域删除文本框。
将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>

Answer 1

首先，我在你的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`
}

根据您的方案更新上述代码，事情应该正常。

代码可能有一些错误，因为我只是键入它并且没有运行。但它肯定会给你一个好主意。

jQuery UI - 当项目被删除时，将HTML添加到元素

1 个答案: