我正在使用.draggable创建一个可拖动的div(发布便笺),但我似乎无法弄清楚如何使每个元素都可拖动 . 这是我的创建div函数 . 如何创建一个可创建可拖动div的按钮?谢谢!
$(function() {
$( "#draggable" ).draggable();
});
function createDiv() {
var yellowButton = document.getElementById("yellowColor");
var greenButton = document.getElementById("greenColor");
var blueButton = document.getElementById("blueColor");
var purpleButton = document.getElementById("purpleColor");
var newNote = document.createElement('div');
if (yellowButton.checked) {
document.getElementById('theText1').innerHTML = document.getElementById("textOfNote").value;
newNote.innerHTML = document.getElementById('yellowNote').innerHTML;
document.body.appendChild(newNote);
newNote.style.display = "inline-block";
newNote.id="draggable";
}
if (greenColor.checked) {
document.getElementById('theText2').innerHTML = document.getElementById("textOfNote").value;
newNote.innerHTML = document.getElementById('greenNote').innerHTML;
document.body.appendChild(newNote);
newNote.style.display = "inline-block";
}
if(blueColor.checked) {
document.getElementById('theText3').innerHTML = document.getElementById("textOfNote").value;
newNote.innerHTML = document.getElementById('blueNote').innerHTML;
document.body.appendChild(newNote);
newNote.style.display = "inline-block";
}
if(purpleColor.checked) {
document.getElementById('theText4').innerHTML = document.getElementById("textOfNote").value;
newNote.innerHTML = document.getElementById('purpleNote').innerHTML;
document.body.appendChild(newNote);
newNote.style.display = "inline-block";
}
1 回答
您可以使用jQuery UI的可拖动方法来实现此目的 . 只需将类
.draggable
应用于您创建的笔记,然后应用:使
class="draggable"
可拖动所有元素 .见工作示例: