onclick clone() 在容器的 x&y=0 处可拖动以避免任何偏移

Question

我正在尝试做与此类似的事情 jsFiddle 但我不想手动将小部件放在容器上，而是想单击小部件，小部件会自动进入 x=0 和 y= 0 的遏制。当然，然后可以拖放（但为此代码运行良好）。

这背后的原因是我想避免任何网格偏移。因此，一旦我得到 x=0 和 y=0，我就可以通过以下方式信任容器内的网格：

if (ui.draggable[0].id) {
                        $(this).append($(ui.helper).clone().draggable({
                        grid: [ 40, 40 ],   
                            containment: "#builder",                          
                        }));

                    }

我已经仔细检查了 google 似乎不可能捕捉到以 x=0 和 y=0 包含的网格开始的网格。由于页面的网络架构，总会有一个偏移量。但如果你有解决方案，我会接受！

Answer 1

要完成这项工作，您可以将 click 处理程序附加到小部件，该处理程序可以手动将它们克隆并附加到 #builder。要使它们默认显示在左上角，您只需在 #builder 的 CSS 中设置 position: relative，然后在添加之前指定克隆的位置：

$widgets.click(function() {
  $('#builder').append($(this).clone().removeAttr('id').css({
    position: 'absolute',
    top: 0,
    left: 0
  }).draggable({
    containment: "#builder",
    scroll: false
  }));
});

Updated example

但是您应该注意，您需要在此代码中解决很多问题：

jQuery (1.6.3) 版本严重过时 - 更新它
将内联样式移至永恒的样式表
使用常见的类来对元素进行分组，而不是使用巨大的选择器，例如 $('#widget1, widget2, .... #widgetN')
无效HTML； div 元素不能是 ul 的子元素，只有 li 可以是
几个未使用的包含元素，可以删除。
'trash' 功能不适用于较大尺寸的小部件
在 JS 中使用 HTML 注释

Answer 2

一些更新：

$(function() {
  function makeDrag(o) {
    o.draggable({
      grid: [40, 40],
      containment: "#builder"
    });
  }

  $("#catalog .widget").click(function(e) {
    var w = $(this).clone().removeAttr("id");
    w.appendTo("#builder").position({
      my: "left top",
      at: "left top",
      of: $(this)
    });
    w.animate({
      top: 0,
      left: 0
    }, "fast");
    makeDrag(w);
  });

  $("#trashWidget").droppable({
    greedy: 'true',
    accept: function() {
      return true;
    },
    drop: function(event, ui) {
      tolerance: 'fit',
      $(ui.draggable).remove();
    }
  });
});

#products {
  width: 200px;
  float: left;
}

#catalog {
  padding: 20px 0px 0px 0px;
  border: 1px dotted rgb(204, 204, 204);
}

.widget {
  border: 1px dotted rgb(204, 204, 204);
  width: 50px;
  height: 50px;
  background-color: #eae9e4;
}

#builder {
  padding: 0px 0px 0px 0px;
  float: left;
  border: 1px dotted rgb(204, 204, 204);
  width: 500px;
  height: 400px;
  position: relative;
}

#builder .widget {
  position: absolute;
  background-color: #eae9ff;
  border: 1px dotted rgb(175, 175, 175);
}

#trashWidget {
  width: 46px;
  height: 46px;
  float: right;
  padding: 0px 0px 0px 0px;
  border: 1px dotted rgb(204, 204, 204);
}

a {
  color: 0076A3;
  text-decoration: none;
  outline: none;
  font: normal 11px/13px Verdana, Helvetica, sans-serif;
}

a:active {
  color: #0076A3;
  text-decoration: underline;
}

a:visited {
  color: #0076A3;
  text-decoration: none;
}

a:hover {
  color: #0076A3;
  text-decoration: underline;
}

span {
  font: normal 11px/13px Verdana, Helvetica, sans-serif;
}

div {
  font: normal 11px/13px Verdana, Helvetica, sans-serif;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
  <div style="width:750px; display: block;">
    <div id="products">
      <span style="color:#D8781A;">WIDGET SELECTOR</span>
      <div id="catalog" align="left">
        <div>
          <ul style="list-style:none;">
            <div id="widget1" class="widget" style="width:50px; height: 50px;"></div>WIDGET 1
            <div id="widget2" class="widget" style="width:100px; height:100px;"></div>WIDGET 2
            <div id="widget3" class="widget" style="width:75px; height:75px;"></div>WIDGET 3
          </ul>
        </div>
      </div>
    </div>
    <div style="padding:0px 0px 0px 0px; float:left;">
      <br />
    </div>
    <span style="color:#D8781A;">WIDGET BUILDER</span>
    <br />
    <div id="builder">
      <div>
        <div id="trashWidget">trash</div>
      </div>
    </div>
  </div>
</div>

已完成大量清洁工作。更新为 jQuery 和 jQuery UI 的更现代版本。动画化了从开始到 (0, 0) of #builder 的运动。将许多样式从 style 属性移动到 CSS。将 relative 位置添加到 #builder 以确保子元素的正确 absolute 定位。

祝你好运！

onclick clone() 在容器的 x&y=0 处可拖动以避免任何偏移

onclick clone() a draggable at x&y=0 of the containment to avoid any offset

jquery

jquery-ui

drag-and-drop

snap-to-grid