我正在使用 jquery 的插件将图像拖放到 div 中。拖动有效，但下降无效。
图像在 ajax 调用后从 java 脚本中显示。这是代码：
$.ajax({
url: urlBase + "/api/services/getserviceitems?servicetype=0",
context: document.body,
dataType: 'json',
async: true
}).done(function (data) {
console.log(data);
var html = "<table><tr>";
var ctr = 0;
$.each(data, function (k, v) {
if (ctr < 3) {
html += "<td class='item'><img src='" + urlBase + "/file/getimage/" + v.FileId + "' style='width:120px; height:120px; padding:5px'><div style='font-size:12px; margin-left:5px; margin-top:-5px;'>$" + v.Price + ".00</div></td>"
ctr++;
}
else {
ctr = 0;
html += "<tr><td class='item' ><img class='item' src='" + urlBase + "/file/getimage/" + v.FileId + "' style='width:120px; height:120px; padding:5px'><div style='font-size:12px; margin-left:5px; margin-top:-5px;'>$" + v.Price + ".00</div></td></tr>"
ctr++;
}
html += "</tr></table>";
$('#menuTabContent').html(html);
});
enableDragDrop()
这是我的拖放代码。
function enableDragDrop() {
$('.item').draggable({
revert: true,
proxy: 'clone',
onStartDrag: function () {
$(this).draggable('options').cursor = 'not-allowed';
$(this).draggable('proxy').css('z-index', 10);
},
onStopDrag: function () {
$(this).draggable('options').cursor = 'move';
}
});
$('.newRequestModalBody-Right').droppable({
onDragEnter: function (e, source) {
alert("!!!!");
$(source).draggable('options').cursor = 'auto';
},
onDragLeave: function (e, source) {
alert("!!!!");
$(source).draggable('options').cursor = 'not-allowed';
},
onDrop: function (e, source) {
//var name = $(source).find('p:eq(0)').html();
//var price = $(source).find('p:eq(1)').html();
//addItem(name, parseFloat(price.split('$')[1]));
alert("!!!!");
}
});
}
在 droppable 中设置的 div 是正常创建的。
<div id ="requestDv"></div>
我正在为 JS 中的 requestDv 创建一个表：
function loadGuestRequestItems(){
var html = "";
html = "<p style='padding:10px;font-size:12px;'>Requests(Drag items here)</p>"
html += "<table style='font-size:12px;' class='table table-striped'>";
html += " <tr>";
html += " <th>Type</th>";
html += " <th>Details</th>";
html += " </tr>";
html += "</table>";
$('#requestDv').html(html);
}
另一件事，代理：“克隆”不起作用。整个图像仍在被拖动，从其位置移除图像。先感谢您！