Question

我尝试了很多东西，但这是我最近的尝试。我只是想改变＆lt; li>放弃＆lt; li>到＃＆＃34;＃added＆＃34; ＆LT; div＆gt;。我正在使用一个＆＃39;开关＆＃39;声明分别更改每个元素。我尝试过使用.remove（）以及.replaceWith()，我是jQuery的新手，所以如果你知道更好的方法，我会很高兴听到它。这是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，而不是一个类（因此请使用#）。另外div不是一个类，你应该在那里使用一些空格而不是点。 JQuery选择器就像CSS选择器一样工作。

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

我已经更新了你的小提琴。修复了选择器并使用html()函数替换内容。我也不得不稍微延迟它（setTimeout），因为你的循环需要一点时间才能完成（尝试没有它，它将无法在第一次尝试时使用）。

无论如何，这里是小提琴（只有switch语句中的第一个案例是固定的，所以它只适用于“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/

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

1 个答案: