1

我正在尝试做与此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",                          
                        }));

                    }

我已经在谷歌上仔细检查过，似乎不可能捕捉一个以 x=0 和 y=0 开始的网格。由于页面的 Web 架构，总会有一个偏移量。但是，如果您有解决方案，我会接受！

4

2 回答 2

0

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

$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元素不能是 a 的子元素，ul只能li
  • 可以删除的几个未使用的包含元素。
  • “垃圾”功能不适用于较大尺寸的小部件
  • 在 JS 中使用 HTML 注释
于 2018-02-14T15:28:12.583 回答
0

一些更新：

$(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 版本。动画从 start 到(0, 0)of的运动#builder。style将许多样式从属性移至 CSS 。添加relative位置以#builder确保正确absolute定位子元素。

祝你好运！

于 2018-02-14T15:54:14.593 回答