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

问题描述

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

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

enter image description here

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

这是我的可投放代码

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>

感谢我能否获得帮助：）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）