jQuery-使用现有元素序列化下拉组 [英] Jquery - Serializing drop and down group with existing element
问题描述
更新:我已经更改了jsfiddle.我确定该元素必须加载javascript/jquery才能获得jquery行为. javascript寡妇的底部保存了现存的js var，我认为该var应该用于插入元素.它被附加到适当的区域(#drop-area)，但仍不能排序或无法将字段"放入其中. jsfiddle链接已更改为该新版本.
UPDATE: I have changed the jsfiddle. I am sure the element has to be loaded the javascript/jquery to get the jquery behavior(s). The bottom of the javascript widow holds existing_js var which I think should be used to insert the element. It is appended to the proper area (#drop-area) but it is still not sortable or able to have "fields" dropped into it. The jsfiddle link has been changed to this new version.
我有一个拖放序列化列表.我将其拖放到工作区"中.我只是在工作区中添加了一个预加载的元素("fieldset").当我在工作区中对元素进行排序时，控制台日志会显示序列化的可排序数据.现在，当我查看控制台日志(js窗口中的第118行)时，现有元素未在序列化数据中列出.我确定我必须以某种方式进行注册，但是我不确定如何进行注册.下面的JSfiddle链接.
I have a drag and drop serialized list. I am dragging and dropping it into my "workarea". I just added a preloaded element ("fieldset") in the work area. When I sort the elements in the Working Area a console log displays serialized sortable data. Now when I view a console log (line 118 in js window) the existing element is not listed in the serialized data. I am sure I have to register it somehow but I am not sure how. JSfiddle link below.
要重新创建问题，请查看开发人员工具中的控制台日志.将左侧菜单表单结构"下的任何元素拖到工作区"中.当您拖放元素(通过右上角的手柄)时，它将创建序列化数据的控制台日志.它不考虑预先存在的可排序元素.
To recreate the issue, look at the console log in developers tools. Drag any element under the left menu "Form Structure" into the "Working Area". When you drag and drop the elements (by the handle in the upper right corner) it creates a console log of the serialized data. It does not account for the pre-existing sortable element.
感谢您的关注.
$(function() {
$('#accordion').find('.accordion-toggle').click(function(){
//Expand or collapse this panel
$(this).next().slideToggle('slow');
//Hide the other panels
// $(".accordion-content").not($(this).next()).slideUp('slow');
});
function randomString(length, chars) {
var result = '';
for (var i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)];
return result;
}
// var fsID = randomString(8, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'); // Example Random string...for use later in script.
var fs_count = 0;
function makeFieldTarget($fs) {
$fs.droppable({
accept: '.draggableField, .activeField',
drop: function(event, ui) {
var clone, cloneClass;
if (ui.draggable.data("source") == "sidebar") {
clone = $(ui.draggable).clone();
var f_ID = randomString(8, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');
clone.removeClass('draggableField').addClass('activeField').attr('id' , f_ID);
$(this).append(clone);
cloneClass = clone.attr('class');
var buttonAdd = "<div buttonController='" + f_ID + "' class='removeButton'><img src='https://www.shareicon.net/data/128x128/2015/11/10/160511_delete_256x256.png' class='removeField' targetField='" + f_ID + "' height='20px'> </div>";
$(this).append(buttonAdd);
$(".removeField").click(
function () {
var deleteTarget = $(this).attr('targetField');
$("[id*='" + deleteTarget + "']").remove();
$(this).parent().remove();
});
console.log('DROPFIELD - you dropped a field from the side bar: ' + cloneClass);
clone.data("source", "fieldset").draggable({
zIndex: 1000,
containment: '.ui-sortable'
});
}
if (ui.draggable.data("source") == "fieldset") {
clone = ui.draggable;
var identifier = clone.attr('id');
clone.detach().attr("style", "").appendTo($(this));
var clone_ID = clone.attr('id');
$("[buttonController*='" + clone_ID + "']").remove();
cloneClass = clone.attr('class');
var buttonAdd = "<div buttonController='" + clone_ID + "' class='removeButton'><img src='https://www.shareicon.net/data/128x128/2015/11/10/160511_delete_256x256.png' class='removeField' targetField='" + clone_ID + "' height='20px'> </div>";
$(this).append(buttonAdd);
$(".removeField").click(
function () {
var deleteTarget = $(this).attr('targetField');
$("[id*='" + deleteTarget + "']").remove();
$(this).parent().remove();
});
console.log('DROPFIELD - you dropped a field from a Field set: ' + cloneClass);
}
}
});
}
$("#drop-area").droppable({
accept: '.ui-draggable:not(.draggableField , .activeField)',
drop: function(event, ui) {
fs_count++;
var clone = $(ui.draggable).clone()
clone.addClass('connectedSortable');
if (clone.hasClass('dropped')) {
return false;
}
clone.addClass('connectedSortable dropped').css('cursor' , 'pointer').attr('id', 'fs_' + fs_count);
$(this).append(clone);
var fs_class = clone.attr('class');
var fs_id = clone.attr('id');
console.log('DROPAREA - You added a fieldset with class ' + fs_class + ' & and ID of ' + fs_id);
makeFieldTarget(clone.find(".fieldDroppable"));
$("#drop-area").sortable("refresh");
}
});
$(".ui-draggable").draggable({
opacity: 1.0,
helper: 'clone',
revert: 'invalid'
});
$(".draggableField").data("source", "sidebar").draggable({
containment: '#drop-area',
opacity: 1.0,
helper: 'clone',
revert: 'false',
zIndex: 1000
});
$("#drop-area").sortable({opacity: 0.5, stop: function(event, ui) { console.log("stop");},
containment: 'parent',
handle: '.drag-handle',
placeholder: "drop-place-holder",
items: "div.dropped",
update: function() { //triggered when sorting stopped
var dataAuto = $("#drop-area").sortable("serialize", {
key: "za",
attribute: "id",
});
console.log(dataAuto);
}
});
$("#drop-area").disableSelection();
});
推荐答案
默认情况下，它通过查看格式为
"setname_number"的每个项目的ID起作用，并吐出类似"setname[]=number&setname[]=number"的哈希.
It works by default by looking at the id of each item in the format
"setname_number", and it spits out a hash like"setname[]=number&setname[]=number".
https://jsfiddle.net/Twisty/tw62fm1p/
您当前的代码说:
<div class='tile ui-draggable connectedSortable dropped' id='vuLc3s3c' style='cursor: pointer;' trigger='existing_fs'>
当Sortable创建哈希时，它不能包含此元素，因为它的格式不正确id.更改为:
When Sortable goes to create the Hash, it cannot include this element as it is not in the correct id format. Change it to:
<div class='tile ui-draggable connectedSortable dropped' id='fs_0' style='cursor: pointer;' trigger='existing_fs'>
然后您将看到:
za[]=1&za[]=0
update运行时.
还要进行以下更改:
items: "> div.dropped",
update: function() { //triggered when sorting stopped
var dataAuto = $("#drop-area").sortable("serialize", {
key: "za[]",
attribute: "id",
});
console.log(dataAuto);
}
这篇关于jQuery-使用现有元素序列化下拉组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
