拖放可缩放的内容偏移量(）

Drag and drop scaleable content offset()

本文关键字：偏移量 缩放 拖放      更新时间：2023-09-26

我在左侧有 4 个拼图，右侧有另外 4 个拼图。我需要将碎片从右侧拖到左侧并使它们连接......问题是，我的内容是可缩放的，所以如果我将一块放到 dropspot 上，当我调整页面大小时，它将保留在那里，并且不会与左侧拼图相配。我已经阅读了一些关于抵消的内容，在这种情况下会有所帮助吗？

这是我尝试使用div 作为放置点的方法，但是当我在它们上方时，我无法使碎片适合放置点，如果我调整页面大小，则不会连接碎片：

http://jsfiddle.net/zf66b/7/

法典：

$(function() {
    for(var i = 0; i < piesedrag.length; i++)
    {
    $(piesedrag[i]).draggable
    ({
        containment: "#decor",
        cursor: "move",
        revert: "invalid",
        });
    }
    for(var i = 0; i < dropspot.length; i++)
    {
          $( dropspot[i] ).droppable({  
            /*  tolerance: "intersect",*/
          drop: function( event, ui ) 
            {
            tolerance: 'intersect'
            }    
        });
    }
});

要使其正常工作，您必须将大小和位置从百分比更改为固定值，这里有一些修复：

right {
  left:400px;
  width:200px 
}
.left {
  left: 0px;
  width: 200px;
}
#dropspot3 {
/* margin-left: 34%; */
width: 150px;
}

为每个放置点设置固定宽度并删除百分比边距。

相关文章：