Question

我有几个可拖动的按钮和一个可放置的textarea。当我将其中一个可拖动按钮拖到textarea上时，它会显示一些代码。如果我再拖一个按钮，则与该按钮相关的文本将附加到上一个按钮。

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

这是我的代码

脚本：

$("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>

小提琴： http://jsfiddle.net/ktL02h7u/16/

Answer 1

我将jQuery UI添加到你的小提琴中，也将texarea改为<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);
        }                            
    }

}

Jquery拖放在不同的位置

1 个答案: