Dynamic Drag Drop Jquery UI Sortable

Question

I was trying JQuery UI Sortable API from here. I am trying to create the above structure using JavaScript and rendering the tiles dynamically. JSFiddle for dynamic Jquery UI Sortable which I have tried is: https://jsfiddle.net/akashkotecha73/soq5r1tu/2/

The problem with the dynamic code is that dynamically generated tiles are not draggable. Could you please help me in making the tiles draggable. Any help is appreciated.

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

Binary Brackets · Accepted Answer · 2017-06-22 10:47:56Z

Please update your code with below mentioned code..., it's will working for me...

You have to update sortable plugin dynamicall...after each ajax call getJson call..., Hope it will woks for you..

$( 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();
    }
});

Karthik Rajan · Accepted Answer · 2017-06-22 10:52:30Z

0

The reason is JavaScript is reading the element when the page is loading. So your elements are not recognized by the browser when you append it from java-script. Kindly do the same in ajax. So you can do as easy. So you just append the element from ajax.

answered Jun 22, 2017 at 10:52

Karthik Rajan

1651 silver badge16 bronze badges

Collectives™ on Stack Overflow

Dynamic Drag Drop Jquery UI Sortable

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related