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

Posted 2023-05-08

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

【英文标题】：onclick clone() a draggable at x&y=0 of the containment to avoid any offset

【发布时间】：2018-07-25 04:49:12

【问题描述】：

我正在尝试做与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 开头的网格。由于页面的 Web 架构，总会有一个偏移量。但如果你有解决方案，我会接受！

【问题讨论】：

这很难做到.....

@Morse 非常感谢！

我不是在开玩笑

【参考方案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 可以 可以删除几个未使用的包含元素。 “垃圾箱”功能不适用于较大尺寸的小部件 在 JS 中使用 HTML cmets

【讨论】：

非常感谢您提醒我您注意到的所有问题。我100%同意。问题是那不是我的小提琴，我一直懒得复制它。在我的代码中，架构要复杂得多，并且与显示它的这个特定问题无关......关于你的代码，它太棒了，正是我需要的！谢谢！！

如果您有 paypal 或同等服务，很乐意请您喝一杯！祝你有美好的一天！

【参考方案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) 的#builder 的运动动画。将许多样式从 style 属性移至 CSS。将relative 位置添加到#builder 以确保absolute 子元素的正确定位。

祝你好运！

【讨论】：

感谢您的帮助！ =)