动态拖放 Jquery UI 可排序答案

【问题标题】：Dynamic Drag Drop Jquery UI Sortable动态拖放 Jquery UI 可排序
【发布时间】：2017-06-22 10:38:17
【问题描述】：

我正在尝试来自 here 的 JQuery UI Sortable API。我正在尝试使用 JavaScript 创建上述结构并动态渲染图块。我尝试过的用于动态 Jquery UI Sortable 的 JSFiddle 是： https://jsfiddle.net/akashkotecha73/soq5r1tu/2/

动态代码的问题是动态生成的图块不可拖动。你能帮我制作可拖动的瓷砖吗？任何帮助表示赞赏。

<!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>

【问题讨论】：

标签： javascript jquery drag-and-drop jquery-ui-sortable

【解决方案1】：

请用下面提到的代码更新您的代码...，它将为我工作...

您必须更新sortable plugin dynamicall...在每次 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();
    }
});

【讨论】：

它对我有用。感谢您的帮助。

【解决方案2】：

原因是页面加载时 JavaScript 正在读取元素。因此，当您从 java-script 附加元素时，浏览器无法识别您的元素。请在ajax中做同样的事情。所以你可以做的很简单。所以你只需从 ajax 追加元素。

【讨论】：