動態拖放Jquery UI可排序

我正在嘗試從here的JQuery UI可排序API。我正在嘗試使用JavaScript創建上述結構並動態地呈現這些圖塊。 JSFiddle for dynamic jquery UI Sortable我試過的是： https://jsfiddle.net/akashkotecha73/soq5r1tu/2/動態拖放Jquery UI可排序

動態代碼的問題是動態生成的tile不可拖動。你能幫我製作可拖動的瓷磚嗎？任何幫助表示讚賞。

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

來源

2017-06-22 user3354711

請與下面提及的代碼更新代碼......，這是意志的工作對我來說...

必須更新sortable插件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(); 
    } 
});

來源

2017-06-22 10:47:56

它爲我工作。感謝您的幫助。 – user3354711

原因是JavaScript正在讀取頁面加載時的元素。因此，當您從java-script附加它時，瀏覽器無法識別您的元素。請在阿賈克斯做同樣的事情。所以你可以輕鬆做到。所以你只需追加來自Ajax的元素。

來源

2017-06-22 10:52:30

動態拖放Jquery UI可排序

回答

相關問題