Question

我在页面中有一个元素列表，需要将其拖动到同一页面的iframe中。我目前有2个问题。

当我在iframe上拖动并移动时，拖动元素会卡住并且有时不移动。
拖动元素时，鼠标会检测到元素，但元素并不完全在该位置（相同的尺寸，但从左到上具有负边距-请参见下图）

我需要将元素恰好放在可放置区域内。

这是我的可投放代码

var iBody = $("#iframe").contents().find("body");
$("#iframe").contents().find(".place-elements").css('border' , '#e10303 1px solid');
var columnInside = $("#iframe").contents().find("body").find("div");
// columnInside.droppable({drop: function(){alert(1);}});
                
                alert("asd")


               columnInside.droppable({
                    accept: ".other-elements",
                    hoverClass: "ui-state-active",
                    greedy: true,
                    drag: function() {
                      var offset = $(this).offset();
                      var xPos = offset.left;
                      var yPos = offset.top;
                      var $droppable = $(this).data("current-droppable");
                      console.log($droppable)
                    },
                    drop: function(event, ui) {


                      var item = ui.draggable;

                      var elementType = item.attr("data-type"); // droped element type
                      
                      
                       var currentPos = ui.helper.position();
                       

                       const dropZoneID = $(this).attr('id');
                       const dropZoneDataID = $(this).attr('data-id');
                       const droppedItemID = ui.draggable.attr("id");
                       const acceptingData = $(this).attr("data-accept");


                       if (acceptingData == 'elements') {
                            //dropping element here by creating a new element using javascript

                       }

                      
                       

                    }
                });

这是我的要素

<li class="widget-wrapper other-elements element-image" data-type="image">
        <div class="element-inside">
            
            <div class="widget-txt" data-type="image">Image</div>
        </div>
    </li>

这是我的可投放区号

<div id="column_1601611778273" data-id="1601611778273" data-accept="elements" class="place-elements" style="border: 1px solid rgb(225, 3, 3);"></div>

感谢我能否获得帮助：）

jQuery拖放将元素可放置区域检测为元素外部

0 个答案: