动态拖放 Jquery UI 可排序

Question

我正在尝试 JQuery UI 可排序 API 来自 here。我正在尝试使用 JavaScript 创建上述结构并动态渲染图块。 JSFiddle for dynamic Jquery UI Sortable 我试过的是： 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>

Answer 1

请使用下面提到的代码更新您的代码...，它对我有用...

您必须更新 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();
    }
});

Answer 2

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

中的元素

动态拖放 Jquery UI 可排序

Dynamic Drag Drop Jquery UI Sortable

javascript

jquery

drag-and-drop

jquery-ui-sortable