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
  }));
});

更新示例

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

• jQuery的大量过时版本(1.6.3( - 更新
• 将内联样式移动到永恒的样式
• 使用普通类来分组元素而不是巨大的选择器，例如$('#widget1, widget2, .... #widgetN')
• 无效的html;div元素不能是ul的孩子，只有li can
• 几个未使用的包含可以删除的元素。
• "垃圾"功能不适用于较大尺寸的小部件
• 使用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。从#builder的(0, 0)开始动画动作。从style属性将许多样式转移到CSS。将relative位置添加到#builder，以确保适当的absolute子元素的位置。

祝你好运！