Question

嗨，大家好几天我一直在努力解决这个问题，我就要发脾气了。计划是从列表中拖出一个图标，将所述项目的克隆放入指定区域（在光标位置），然后用户可以根据需要调整克隆的大小。拖动，克隆和调整大小按计划工作。然而，下降导致我没有问题的结束。当放下物品时，它大量向左移动（使用负向左定位）并且在它应该坐的div之外。我已经尝试了所有我能想到的并且无法解决这个问题我。任何帮助将不胜感激。

＆＃13;

< script >
  $(document).ready(function($) {

    $(".droppable").droppable({
      accept: '.draggable',
      drop: function(event, ui) {
        var $clone = ui.helper.clone();
        if (!$clone.is('.inside-droppable')) {
          $(this).append($clone.addClass('inside-droppable').draggable({
            containment: '.droppable',
            tolerance: 'pointer',
            position: 'relative'
          }));

          $clone.resizable({
            aspectRatio: 'true',
            ghost: 'true',
            handles: 'ne, nw, se, sw',
          });
        }
      }
    });
    $(".draggable").draggable({
      helper: 'clone',
      revert: "invalid"
    });
  }); < /script>

＆＃13;

#content {
  height: auto;
  margin-top: 10px;
  margin-left: 0;
  min-height: 0px;
  clear: both;
}
#form-window.scheme {
  width: 97%;
  height: 100%;
  max-height: 760px;
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 3%;
  padding-bottom: 0px;
  overflow-y: hidden;
  position: relative;
  background-color: #ffffff;
}
#icon_menu {
  width: 45px;
  right: 381px;
  position: absolute;
}
#icon_menu li {
  width: 45px;
  height: 45px;
  margin-top: 6px;
  position: absolute;
}
.draggable {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: rgba(127, 214, 236, 0.5);
  cursor: pointer;
}
.droppable {
  position: absolute;
  width: 71%;
  height: 100%;
  border: 1px solid #000;
}

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>



<div id="content">
  <div id="form-window" class="scheme">
    <ul id="icon_menu">
      <li class="draggable"></li>
    </ul>
    <div class="droppable"></div>
  </div>
</div>

＆＃13;

Answer 1

最终发现问题。一旦我将ul的定位改为相对一切都很好。为什么这导致跌幅不能正确定位我不知道，不过相对位置确实如此。

#icon_menu {
width: 45px;
right: 381px;
position: relative;
}

Jquery-ui droppable创建不需要的负面左侧位置

1 个答案: