我正在尝试来自 here 的 JQuery UI Sortable API 。我正在尝试使用 JavaScript 创建上述结构并动态渲染图 block 。我尝试过的用于动态 Jquery UI Sortable 的 JSFiddle 是: https://jsfiddle.net/akashkotecha73/soq5r1tu/2/
动态代码的问题是动态生成的图 block 不可拖动。您能帮我使瓷砖可拖动吗？如有任何帮助，我们将不胜感激。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Display as grid</title>
<link rel="stylesheet" href="jquery-ui.css">
<link rel="stylesheet" href="style.css">
<style>
.closeButton { cursor: pointer; font-size: 15px; text-align: right; }
#sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; margin-left: 450px;margin-top: 200px;}
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$.getJSON("https://raw.githubusercontent.com/akashkotecha/DragDrop/master/test.json", function(json) {
console.log(json);
var ul = document.createElement('ul');
ul.setAttribute('id','sortable');
ul.setAttribute('class','ui-sortable');
document.getElementById('renderTile').appendChild(ul);
var t, tt;
for(i=0;i<json.length;i++){
//alert(JSON.stringify(json[i]));
var li = document.createElement('li');
li.setAttribute('id','tile'+i);
li.setAttribute('class','ui-state-default ui-sortable-handle');
var closeButtonDiv = document.createElement('div');
closeButtonDiv.setAttribute('class','closeButton');
closeButtonDiv.setAttribute('onclick','closeTile(tile'+ i +')')
li.appendChild(closeButtonDiv);
closeButtonDiv.innerHTML = closeButtonDiv.innerHTML + 'X';
t = document.createTextNode(i);
li.innerHTML=li.innerHTML + i;
ul.appendChild(li);
}
});
console.log("Hello");
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
debugger;
} );
function closeTile(tileID) {
$(tileID).remove();
}
</script>
</head>
<body>
<div id="renderTile"></div>
</body>
</html>
最佳答案
请使用下面提到的代码更新您的代码...，它对我有用...
您必须更新 sortable 插件动态...在每次 ajax 调用 getJson 调用之后...，希望它对您有用..
$( function() {
$.getJSON("https://raw.githubusercontent.com/akashkotecha/DragDrop/master/test.json", function(json) {
console.log(json);
var ul = document.createElement('ul');
ul.setAttribute('id','sortable');
ul.setAttribute('class','ui-sortable');
document.getElementById('renderTile').appendChild(ul);
var t, tt;
for(i=0;i<json.length;i++)
{
//alert(JSON.stringify(json[i]));
var li = document.createElement('li');
li.setAttribute('id','tile'+i);
li.setAttribute('class','ui-state-default ui-sortable-handle');
var closeButtonDiv = document.createElement('div');
closeButtonDiv.setAttribute('class','closeButton');
closeButtonDiv.setAttribute('data-id',i); //Create data-is attribut
li.appendChild(closeButtonDiv);
closeButtonDiv.innerHTML = closeButtonDiv.innerHTML + 'X';
t = document.createTextNode(i);
li.innerHTML=li.innerHTML + i;
ul.appendChild(li);
}
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
});
$(document).on('click', '.closeButton', function(event) {
var id = $(this).attr('data-id') || null;
if(id)
{
$("#tile"+id).remove();
}
});
关于javascript - 动态拖放 Jquery UI 可排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44697005/