Jquery在不同位置拖放

Jquery Drag and Drop at different locations

本文关键字：位置拖放 Jquery 更新时间：2023-09-26

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

我的问题是我怎么能把我的下一个按钮文本/片段之间的这两个代码片段?

这是我的代码

脚本:

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

我添加了jQuery UI到你的fiddle，也改变了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);
        }                            
    }
}