jQuery draggable可排序，在删除元素上更改html [英] jQuery draggable sortable, changing html on dropped element
问题描述
我有它的工作...大多...使用draggable（）和sortable（）。目前，我使用可排序的receive事件从draggable元素获取id，我将其放入一个data（）块中以传递给update事件。从那里，我使用id元素做一个ajax调用，确定它是什么类型的字段，以及从后端添加什么选项，构建元素，然后使用 ui将其放在界面中。 item.html ，这是更新函数传递的元素。
我的方法的问题是它也是在元素被拖动，这导致选择元素在屏幕无意附加到可排序列表时丢弃屏幕。显然，接收事件是仅当排序从连接的列表中获取项目时触发的事件。但是，如果我尝试内部html的 ui.item 元素，它会更改源列表，而不是所需的目标。当项目已经在右边的Webform列表中时，我绝对不想修改它们，只要它们被排序。
有没有办法在连接的 sortable（）列表接收事件中访问和更改目标html？有没有其他的策略可以解决我的挑战？
代码：
< div class =grid_3 mainwindow formfields>
< h3>可用字段< / h3>
< div id =accordion>
< ul>
< li>名字< / li>
< li>姓氏< / li>
< li>公司< / li>
< / ul>
< / div>
< / div>
< / div>
< div class =grid_12 formcontainer formfields>
< h3> Webform< / h3>
< form id =formaction =http://responses.smarttracks.commethod =post>
< input type =hiddenname =webform_idid =webform_idvalue =<？php echo $ webform_id？>>< / input>
< ul id =webform_list>< / ul>
< / form>
< / div>
而且jQuery
/ *****使webform域可拖动***** /
$（.master_list li）.draggable（{
connectToSortable：#webform_list，
helper：clone，
revert：invalid
}）;
/ *****使表单元素可排序***** /
$（#webform_list）.sortable（{
revert：true，
cursor：'pointer'，
placeholder：placeholderdiv，
receive：function（event，ui）{
$（this）.data（'id'，ui.item [0 ] .id）;
var element = event.target
}，
更新：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（发生请求时发生错误：+ errorTh rown）
}，
success：function（data）{
switch（data.control_type）{
case'text'：
var inputfield = $（'< ; input type =text>'）。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 = $（'< textarea>'）;
break;
case'下拉菜单（单选）'：
var inputfield = $（'< select>'）;
$ .each（data.field_options，function（name，value）{
inputfield.append（$（< option>< / option>） ，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 = $（'< input type =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>'） （inputfield）.wrapInner（'< div class =hoverdiv/>'）;
}
}
}）;
}
}
}）;
而不是像这样使用droppable
$（.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'
}）;
我没有发布整个代码，只是给你粗略的想法。
I'm designing a form-building interface. All available fields will be in an unordered list on the left of the interface, with a large, empty unordered list on the right which will become my webform. The "trick" to making this interface work is having the list items from the left transformed into valid html elements by appending html into the droppable ui element just before they are appended into the sortable list on the right.
I have it working...mostly...using draggable() and sortable(). Currently, I use the receive event of sortable to get the id from the draggable element, which I place into a data() block to pass to the update event. From there, I do an ajax call with the id element, determine what type of field it is and what options should be added from the back end, build the element, then put it in the interface using ui.item.html, which is an element passed by the update function.
The problem with my method is that it also is firing when an element is dragged, which cause select elements to litter the screen when they unintentionally append to the sortable list. Clearly, the receive event is the one that is fired only when the sort gets an item from a connected list. However, if I try to inner html the ui.item element, it changes the source list, not the desired target. When items are already in the webform list on the right, I definitely don't want to be modifying them if they're just being sorted.
Is there any way to access and change the target html in a connected sortable() list receive event? Are there any other strategies that might solve my challenge?
The Code:
<div class="grid_3 mainwindow formfields">
<h3>Available Fields</h3>
<div id="accordion">
<ul>
<li>First Name</li>
<li>Last Name</li>
<li>Company</li>
</ul>
</div>
</div>
</div>
<div class="grid_12 formcontainer formfields">
<h3>Webform</h3>
<form id="form" action="http://responses.smarttracks.com" method="post">
<input type="hidden" name="webform_id" id="webform_id" value="<?php echo $webform_id ?>"></input>
<ul id="webform_list"></ul>
</form>
</div>
And the jQuery
/***** 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 = $('<input type="text">').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 = $('<textarea>');
break;
case 'Dropdown Menu (Single Select)':
var inputfield = $('<select>');
$.each(data.field_options, function(name, value) {
inputfield.append($("<option></option>").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 = $('<input type="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" />');
}
}
});
}
}
});
Instead use droppable just like this
$( ".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'
});
I have not posted whole code , just gave you rough idea to work.
这篇关于jQuery draggable可排序，在删除元素上更改html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
