Question

我正在尝试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>

Answer 1

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

你必须在每次ajax调用sortable之后更新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脚本追加它时，浏览器无法识别您的元素。请在ajax中做同样的事情。所以你可以轻松做到。所以你只需要附加ajax中的元素。

动态拖放Jquery UI可排序

2 个答案: