Question

您好我希望能够基于拖放功能创建html元素。我想使用Jquery UI库来执行此操作。 HTML代码在http://pastebin.com/0cn5FDWr

我想要做的是关于项目被删除的时候我想检查哪个项目被删除然后在drop div之后添加一些html元素（即创建输入标签，图像等...）。

不知道我该怎么做，如果可以通过调用包含代码的自定义函数来完成，那么它会很好。

由于

Answer 1

首先，您应指定希望 droppable 接受哪些元素。您可以将accept选项设置为.drag()。

我在jsFiddle上做了两个小例子，第一个使用 sortable ，第二个使用 draggable / droppable 。

Answer 2

你可以在掉落调用中使用一个外部函数来接收被删除的元素，并根据你添加你想要的任何东西：
使用Javascript：

$(function() {
    var $result = $('.result');
    $('.drag').draggable({
        revert: "invalid"
    });
    $('.drop').droppable({
        drop: function(e, ui) {
            outputResult(ui.draggable);
        }
    });

    function outputResult(elm) {
        if ($(elm).hasClass('oTextInput')) {
            $result.append('<input type="text" />');
        } else if ($(elm).hasClass('oRadioInput')) {
            $result.append('<input type="radio" />');
        }
    }
});

HTML：

<div>
    <div class="drag oTextInput">Drag me!</div>
    <div class="drag oRadioInput">Drag me!</div>
    <div class="drag">Drag me!</div>
    <div class="drag">Drag me!</div>
    <div class="drag">Drag me!</div>
    <div class="drag">Drag me!</div>
    <div class="drag">Drag me!</div>
</div>
<div class="drop">drop here!</div>
<div class="output">
    <h2>Results:</h2>
    <div class="result"></div>
</div>

Example link

从JQuery拖放创建元素

2 个答案: