Javascript 与Dragable&；可降落

我面临着可拖放和可拖放的问题，我尝试了许多代码，但似乎事件并没有发生

有人来帮我请帮帮我， 我使用JSON数据文件来显示数据， 我在html页面上获取所有数据，但只是拖放问题， 我正在使用netbeans和Chrome浏览器（我没有adblocker）

桌子{
边界塌陷：塌陷；
}
表tr td{
边框：1px纯红；
填充：2×15px 2×15px；
宽度：自动；
}
#标签ulli.drophover{
颜色：绿色；
}
$（文档）.ready（函数（）{
$（“tr”）。可拖动({
助手：“克隆”
});
$（“tr”）。可拖放({
drop：函数（事件、用户界面）{
$（ui.draggable）.remove（）；
$（ui.helper）.remove（）；
}
});
});
$.ajax({
键入：“GET”，
数据类型：“json”，
url:'data.json'，
成功：功能（数据）{
控制台日志（“收到的数据”）；
var bodyTag=document.getElementsByTagName（“body”）[0]；
var h1Tag=document.createElement（“h1”）；
h1Tag.setAttribute（“id”、“标题”）；
h1Tag.innerHTML=“酒店列表：”；
bodyTag.appendChild（h1Tag）；
//---------------------
var tableTag=document.createElement（“表”）；
var tablebTag=document.createElement（“tbody”）；
setAttribute（“id”、“dragg”）；
//记录转换为jquery对象的数据的结果。
对于（变量i=0；i

---

将可拖动代码放在ajax成功函数中，而不是放在DOM就绪函数中：

---

---

你让我开心，兄弟。。祝福你，哈哈。很乐意帮忙：）

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

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

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


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