issue with Draggable & Droppable

Question

I am Facing problem with Draggable and Droppable, i have tried many codes but it seems Event is not getting fire ,

anyone here to help me out please help me , i have used JSON data file to display data , i am getting all data on html page but just problem with drag and drop , i am uing netbeans and Chrome Browser(i haev no adblocker).

    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

    <style>
        table {
            border-collapse:collapse;
        }
        table tr td {
            border: 1px solid red;
            padding:2px 15px 2px 15px;
            width:auto;
        }
        #tabs ul li.drophover {
            color:green;
        }

    </style>
    <script>
    $(document).ready(function () {

        $("tr").draggable({
            helper: "clone"
        });

        $("tr").droppable({
            drop: function (event, ui) {


                $(ui.draggable).remove();
                $(ui.helper).remove();
            }
        });

    });
    </script>
    <script type="text/javascript">
        $.ajax({
            type: 'GET',
            dataType: "json",
            url: 'data.json',
            success: function (data) {
                console.log("Data Received");
                var bodyTag = document.getElementsByTagName("body")[0];
                var h1Tag = document.createElement("h1");
                h1Tag.setAttribute("id", "title");
                h1Tag.innerHTML = "List Of Hotels : ";
                bodyTag.appendChild(h1Tag);
                //---------------------
                var tableTag = document.createElement("table");
                var tablebTag = document.createElement("tbody");
                tableTag.setAttribute("id", "dragg");
                // log the result of the data converted into a jquery object.
                for (var i = 0; i < data.length; i++) {
                    var trTag = document.createElement("tr");
                    trTag.setAttribute("class", "hotellist");
                    var imgBlock = document.createElement("td");
                    imgBlock.setAttribute("class", "imgcell");
                    var thmbnlimg = document.createElement("img");
                    thmbnlimg.src = data[i].thumbnailUrl;
                    trTag.appendChild(imgBlock);
                    imgBlock.appendChild(thmbnlimg);
                    imgBlock.style.rowspan = "5";
                    var info = document.createElement("td");
                    var namedata = document.createElement("span");
                    namedata.innerHTML = data[i].name;
                    var addressdata = document.createElement("span");
                    addressdata.innerHTML = data[i].location.address.addressLine1;
                    var citydata = document.createElement("span");
                    citydata.innerHTML = data[i].location.address.cityName + data[i].location.address.zip;
                    var cntrydata = document.createElement("span");
                    cntrydata.innerHTML = data[i].location.address.countryName;
                    var phndata = document.createElement("span");
                    phndata.innerHTML = data[i].location.address.phone;
                    var starratingdata = document.createElement("span");
                    starratingdata.innerHTML = "Star Rating : " + data[i].starRating;
                    var reviewscoredata = document.createElement("span");
                    reviewscoredata.innerHTML = "Guest Rating : " + data[i].overallGuestRating;
                    var linkdata = document.createElement("span");
                    var link = document.createElement("a");
                    link.innerHTML = "View";
                    link.href = "http://maps.google.com/?q=" + data[i].location.latitude + "," + data[i].location.longitude;

                    linkdata.appendChild(link);

                    namedata.setAttribute("class", "name");
                    addressdata.setAttribute("class", "address");
                    citydata.setAttribute("class", "city");
                    cntrydata.setAttribute("class", "cntry");
                    phndata.setAttribute("class", "phone");
                    starratingdata.setAttribute("class", "star");
                    reviewscoredata.setAttribute("class", "review");

                    info.appendChild(document.createElement("br"));
                    info.appendChild(namedata);
                    info.appendChild(document.createElement("br"));
                    info.appendChild(addressdata);
                    info.appendChild(document.createElement("br"));
                    info.appendChild(citydata);
                    info.appendChild(document.createElement("br"));
                    info.appendChild(cntrydata);
                    info.appendChild(document.createElement("br"));
                    info.appendChild(phndata);
                    info.appendChild(document.createElement("br"));
                    info.appendChild(starratingdata);
                    info.appendChild(document.createElement("br"));
                    info.appendChild(reviewscoredata);
                    info.appendChild(document.createElement("br"));
                    info.appendChild(linkdata);
                    trTag.appendChild(info);
                    tablebTag.appendChild(trTag);
                }
                tableTag.appendChild(tablebTag);
                bodyTag.appendChild(tableTag);
            }
        });
    </script>
</head>
<body>

</body>

Answer 1

Have the draggable code in your ajax success function rather than in DOM ready:

---

success: function (data) {
//other code
  $("tr").draggable({
            helper: "clone"
        });

    $("tr").droppable({
        drop: function (event, ui) {


            $(ui.draggable).remove();
            $(ui.helper).remove();
        }
};