0

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

另一件事，代理：“克隆”不起作用。整个图像仍在被拖动，从其位置移除图像。先感谢您！

4

1 回答 1

0

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

它应该是助手：“克隆”文档

revert: true

来自 jQuery 文档：

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

所以你要：

revert:"invalid"

这是一个简单的例子：http: //jsfiddle.net/Rusln/8BY5e/

于 2013-06-25T12:34:15.480 回答