0
我正在使用jQuery的插件拖放图像到div。拖动工作,但下降不是。JQuery可拖拽droppble
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>
我创建一个表的requestDv在JS:
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);
}
另一件事,代理: '克隆' 不起作用。整个图像仍然在拖拽图像。先谢谢你!
的jsfiddle将是巨大的 – Muath
我不能因为我从API – ljpv14
'加载图像.newRequestModalBody-Right'是'table'还是什么?你创建了'
'用于放弃,但它没有droppable事件? (IM混淆) – Shaddow