在不同的位置拖放Jquery

Question

我几乎没有可拖动的按钮和一个可下垂的文本区域。当我将一个可拖动的按钮拖到文本区域时，它将显示一些代码。如果我再拖动一个按钮，则与该按钮相关的文本将附加到前一个按钮上。

我的问题是如何在这两个代码段之间删除我的下一个按钮文本/代码段？

这是我的密码

脚本：

$("button").click(function () {
    $("#div1").empty();
});

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData('Text/html', ev.target.id);
}

function drop(ev, target) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text/html");

var function1 = "test1{ \n\n\n}";
var function2 = "test2{ \n\n\n}";
var variable1 = "var first;";    
var variable2 = "var second;";

    console.log("****",target);

    if (data == "test1") {
        if (data) {
            $('#div1').append(function1);
        }
    }
    if (data == "test2") {
        if (data) {
            $('#div1').append(function2);
        }
    }
     if (data == "test3") {
        if (data) {
            $('#div1').append(variable1);
        }
    }
     if (data == "test4") {
        if (data) {
            $('#div1').append(variable2);
        }
    }
}

HTML:

<table>
    <tr>
        <td>
            <button id="test1" ondragstart="drag(event)" draggable="true">Function-1</button><hr>
            <button id="test2" ondragstart="drag(event)" draggable="true">Function-2</button><hr>
            <button id="test3" ondragstart="drag(event)" draggable="true">Variable-1</button><hr>
            <button id="test4" ondragstart="drag(event)" draggable="true">Variable-2</button><hr>
        </td>
        <td>
            <textarea id="div1" ondrop="drop(event, this)" ondragover="allowDrop(event)"></textarea>
        </td>
    </tr>
</table>
<br>
<button>Clear</button>

Fiddle: http://jsfiddle.net/ktL02h7u/16/

Answer 1

我将jQuery UI添加到您的小提琴中，还将文本区域更改为<pre>标记，添加的所有行我将它们包装在<code>中，以便它们成为可以拖动的元素。

在加载页面之后，我使用了$("#div1").sortable();，这使子程序可以排序。如果您希望元素能够顺利地到达它们的位置，那么显然可以将转换添加到元素中。

查看一下：http://jsfiddle.net/ktL02h7u/32/

function drop(ev, target) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text/html");

var function1 = "test1{ \n\n\n}";
var function2 = "test2{ \n\n\n}";
var variable1 = "var first;";    
var variable2 = "var second;";


    if (data == "test1") {
        if (data) {
            $('#div1').append("<code>"+function1+"<br></code>");
        }
    }
    if (data == "test2") {
        if (data) {
            $('#div1').append("<code>"+function2+"<br></code>");
        }
    }
     if (data == "test3") {
        if (data) {
            $('#div1').append("<code>"+variable1+"<br></code>");
        }
    }
     if (data == "test4") {
        if (data) {
            $('#div1').append("<code>"+variable2+"<br></code>");
        }
    }
}
$(function() {
        $( "#div1" ).sortable();
  });

编辑:在我理解您想要插入元素之后，主要的代码更改：http://jsfiddle.net/ktL02h7u/66/

function drop(ev, target) {
    debugger;
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text/html");
    var $target = target ? $(target) : $(ev.target);
    var elementTypes = {
        test1: "test1{ \n\n\n<span class='functionClose'>}</span>",
        test2: "test2{ \n\n\n<span class='functionClose'>}</span>",
        test3: "var first;",
        test4: "var second;"
    }   

    if(data){
        var el = $("<code>"+elementTypes[data]+"<br></code>");
        if(el.find("span").length > 0){
            el.on("dragover",function(ev){
                console.log("dragged over");
                ev.preventDefault();  
                ev.stopPropagation();
                allowDrop(ev);
            }).on("drop", function(ev){
                console.log("dropped over");
                ev.preventDefault();  
                ev.stopPropagation();
                drop(ev.originalEvent,el.find("span")[el.find("span").length -1]);
            });
        }
        if($target.hasClass("functionClose")){
            $target.before(el);
        }
        else{
            $target.append(el);
        }                            
    }

}