jquery拖放在不同的位置

Question

我有几个可拖动的按钮和一个droppable 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); 
     }        
    } 

}