Сделать новый Div перетаскиваемым в JQuery
Я пытаюсь заставить jquery добавить новый div, а затем сделать его перетаскиваемым, но я пытался и смотрел в Google, и я не могу найти здесь ничего мой код ниже
$(document).ready(function() {
$("#draggable").draggable({
containment: 'parent',
handle: 'drag_border',
drag: function(e, ui) {
var top = ui.position.top;
var left = ui.position.left;
$("#top").html(top);
$("#left").html(left);
}
});
});
function New_Text() {
$("<div id=\"draggable\" style=\"width: 200px; height: 50px; border:dashed thin; background-color: #fff\">Drag me</div>").appendTo("div#drag_border");
}
Спасибо
3 ответа
Если вы используете jQuery UI , создайте свой элемент и сделайте его перетаскиваемым:
$("<div />").draggable();
Проблема в том, что вы создаете DIV после того, как попытались сделать его перетаскиваемым.
События jQuery работают только с элементами, которые существуют во время запуска Javascript - есть способы обойти это, используя функции live и делегат , но это не так. похоже, ваш плагин позволяет это.
Итак, если этот код должен остаться прежним, переместите бит, который создает DIV, над перетаскиваемой функцией - и он заработает.
Я не пробовал, но это должно сработать:
function New_Text() {
$("<div id=\"draggable\" style=\"width: 200px; height: 50px; border:dashed thin; background-color: #fff\">Drag me</div>").appendTo("div#drag_border");
setTimeout(function() {
...
});
}, 10);
}
Вы хотите создать div, позволить браузеру добавить его в дерево DOM, а затем вызвать функцию draggable .