Ravi Mehta Ravi Mehta - 5 months ago 23
Javascript Question

issue with Draggable & Droppable

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

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