Question

我正在使用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);
    }

另一件事，代理：'克隆'不起作用。整个图像仍在拖动从其位置移除图像。提前谢谢！

Answer 1

另一件事，代理：'克隆'不起作用。

它应该是帮手：“克隆”docs

revert: true

来自jQuery doc：

Boolean：如果设置为true，则元素将始终还原。

所以你想要：

revert:"invalid"

以下是一个简单示例：http://jsfiddle.net/Rusln/8BY5e/

JQuery draggable droppable

1 个答案: