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); 
     }        
    } 

}