使用 jQueryUI Droppable 更改 <li> 的内容

Question

我尝试了很多东西，但这是我最近的尝试。我只想在将

放到“#added”

上时更改

的内容。我正在使用 'switch' 语句分别更改每个元素。我试过使用 .remove() 以及 .replaceWith(), I am new to jQuery so if you know a better way I would be happy to hear it. Here is the JSFiddle.

jQuery(document).ready(function () {

    var dHtml = "";
    var icons = [];

    var fieldTypes = [{
            "label": "Text",
            "icon": "abc-icon",
            "cls": "btntype_text",
            "type": "<input type='text' disabled/>"
        }, {
            "label": "Date",
            "icon": "calendar-icon",
            "cls": "btntype_date",
            "type": "<input type='date' disabled/>"
        }, {
            "label": "Radio",
            "icon": "radio-icon",
            "cls": "btntype_radio",
            "type": "<input type='radio' disabled/>"
        }, {
            "label": "Checkbox",
            "icon": "checkbox-icon",
            "cls": "btntype_checkbox",
            "type": "<input type='checkbox' disabled/>"
        }, {
            "label": "Selector",
            "icon": "dropdown-icon",
            "cls": "btntype_selector",
            "type": "<input type='text' disabled/>"
        }, {
            "label": "Telephone",
            "icon": "telephone-icon",
            "cls": "btntype_telephone",
            "type": "<input type='tel' disabled/>"
        }];

    for (var f = 0; f < fieldTypes.length; f++) {
        var field = fieldTypes[f];
        dHtml += "<li style='list-style:none;' class='draggable-source " + field.cls + "'><div style='margin-top:6px; margin-right:5px;' class='drag' id='drag'><div style='float:left; margin-top:6px;' id='" + field.icon + "'></div><p style='margin-top:12px'>" + field.label + "</p></div></li>";
    };

    // DRAGGABLE AND SORTABLE

    jQuery(function () {
        jQuery("li").each(function () {
            jQuery(this).draggable({
                helper: "clone"
            });
        });

        jQuery("#added").droppable({
            activeClass: "ui-state-hover",
            hoverClass: "ui-state-active",
            accept: ":not(.ui-sortable-helper)",
            drop: function (event, ui) {
                var draggedElement = ui.draggable;

                var classList = draggedElement[0].className.split(/\s+/);
                var fieldClass = "btntype_text";
                for (var i = 0; i < classList.length; i++) {
                    if (classList[i].substr(0, 8) === "btntype_") {
                        fieldClass = classList[i];
                    }

                }
                console.log(fieldClass);

                switch (fieldClass) {
                    //Nothing Changes
                    case 'btntype_text':
                        jQuery("div.added.li.btntype_text.div.drag").replaceWith("<div style='margin-top:6px; margin-right:5px;' id='dropBg'><div style='float:left; margin-top:6px;' id='" + field.icon + "'></div></div>");
                        break;
                        //Nothing Changes
                    case 'btntype_checkbox':
                        jQuery("div.added.li.btntype_text.div").remove();
                        break;
                        //Nothing Changes
                    case 'btntype_radio':
                        jQuery(ui.draggable).clone().replaceWith("<li style='list-style:none;' class='draggable-source " + field.cls + "'><div style='margin-top:6px; margin-right:5px;' id='dropBg'><div style='float:left; margin-top:6px;' id='" + field.icon + "'></div></div></li>");
                        break;
                        //Nothing Changes
                    case 'btntype_date':
                        jQuery(ui.draggable).clone().replaceWith("<div style='margin-top:6px; margin-right:5px;' id='dropBg'><div style='float:left; margin-top:6px;' id='" + field.icon + "'></div></div>");
                        break;
                        //Added div Disappears
                    default:
                        jQuery(this).remove();
                        jQuery(ui.draggable).clone().appendTo(this).replaceWith("<li style='list-style:none;' class='draggable-source " + field.cls + "'><div style='margin-top:6px; margin-right:5px;' id='dropBg'><div style='float:left; margin-top:6px;' id='" + field.icon + "'></div></div></li>");
                }


                console.log(draggedElement.attr('class'));
                var targetElem = jQuery(this).attr("id");

                jQuery(this).addClass("ui-state-highlight");
                if (jQuery(ui.draggable).hasClass('draggable-source')) jQuery(ui.draggable).clone().appendTo(this).removeClass('draggable-source');
                else jQuery(ui.draggable).appendTo(this);

                console.log(this.id);

            }
        }).sortable({
            items: "li:not(.placeholder)",
            sort: function () {
                jQuery(this).removeClass("ui-state-default");
            }
        });
    });

    jQuery('#pop').html(dHtml);

    console.log(dHtml);

});

Answer 1

两件事：

jQuery("div.added.li.btntype_text.div.drag") - 这永远行不通。 added 是一个 id 而不是 class（所以使用 #）。另外 div 不是 class，你应该在那里使用一些空格而不是点。 JQuery 选择器的工作方式类似于 CSS 选择器。

如果您想对丢弃的不同元素执行特定操作，您可能需要使用 switch。否则你可能只使用动态选择器，像这样： $('#added .' + fieldClass)

我已经更新了你的fiddle。修复了选择器并使用 html() 函数替换内容。我还不得不稍微延迟它 (setTimeout)，因为你的循环需要一些时间才能完成（尝试不使用它，第一次尝试时它不会工作）。

无论如何，这里是 fiddle（只有 switch 语句中的第一个 case 是固定的，所以它只适用于 "Text" 元素。把它放在 switch 之外，它会为所有人工作。

添加的代码：

case 'btntype_text':               
    setTimeout(function () {
        $('#added .' + fieldClass).html("<div style='margin-top:6px; margin-right:5px;' id='dropBg'><div style='float:left; margin-top:6px;' id='" + field.icon + "'></div></div>");
    }, 100);                   
break;

FIDDLE: https://jsfiddle.net/h56y8t39/6/

使用 jQueryUI Droppable 更改 <li> 的内容

Change Contents of <li> Using jQueryUI Droppable

jquery

jquery-ui

droppable

replacewith