У меня есть несколько кнопок с перетаскиванием и одна текстовая область с возможностью копирования. Когда я перетаскиваю одну из перетаскиваемой кнопки в текстовое поле, он отображает некоторый код. Если я перетащу еще одну кнопку, текст, связанный с этой кнопкой, будет добавлен к предыдущей.JQuery Перетаскивание в разных местах
Мой вопрос: как я могу отбросить следующий текст/фрагмент кнопки между этими двумя фрагментами кода?
Это мой код
Сценарий:
$("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/
Спасибо за ответ. Тем не менее я не могу отбросить третье содержимое между двумя первыми. – NNR
почему-то я читал, что вы хотели сортировки .. бах, мой плохой. – Saar