CODEWITHSUNDEEP
javascriptjquerydrag-and-dropjquery-ui-sortable
user3354711
user3354711

Reputation: 51

Dynamic Drag Drop Jquery UI Sortable

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>

Upvotes: 1

Views: 697

Answers (2)

Karthik Rajan
Karthik Rajan

Reputation: 165

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.

Upvotes: 0

Binary Brackets
Binary Brackets

Reputation: 504

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

Upvotes: 1

Related Questions