Question

我需要一个可以拖动到可排序div的简单元素列表。很简单的东西。但我的包含可排序元素的div是位置：相对而且需要保持这样。这会产生一个问题，您可以在此处看到：http://jsfiddle.net/yynqweuj/1/

<ul>
<li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
<ul id="sortable" style="position:relative;">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>

如果您开始拖动“向下拖动”元素，则红色方块显示为帮助并且在光标中心，如果您将元素输入到可排序状态，它仍然可以，但是当您将可排序区域保留为红色时方形移动。这是因为容器具有相对位置，也是因为JQuery UI的更新（我认为）。

我尝试使用1.10.2之类的旧版本并且没有问题，因为帮助程序总是附加到正文但现在使用最后一个稳定版本1.11.2它会附加到正文但是当你进入可排序区域时它是附加到可排序列表......并且它位于相对位置，计算位置的数学是错误的...

有什么想法吗？

谢谢！

Answer 1

首先，您要将<div>追加到无效的<ul>。您应该添加<li>。如果您尝试在项目之间添加居中的方形图标，则可以使用居中的css psuedo元素来实现它，如下所示：

＆＃13;

$(function() {
  $("#sortable").sortable({
    revert: true
  });
  $("#draggable").draggable({
    connectToSortable: "#sortable",
    helper: function() {
      var $helper = $('<li/>', {
        id: 'effect-draghelper'
      });
      return $helper;
    },
    revert: "invalid"
  });
  $("ul, li").disableSelection();
});

＆＃13;

#sortable {
  position: relative;
}
ul {
  text-align: center;
  margin: 0;
  margin-bottom: 10px;
  padding: 0;
  list-style-type: none;
}
li {
  width: 150px;
  margin: 5px;
  padding: 5px;
}
#effect-draghelper::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<ul>
  <li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>
<p>zklzejrkzer jzerj klzejrlkjzerzjre jzeklr klzejrl zjlkerj lzjelrk jzjerkl zlkerj lkzjelrj lzjr l jzelkjr kzer zlerjlk zer z jerkl zklerkj zlrj zelkr klzr zkler jklzelkr jlkz j rlkzejlkr lkzej r jklze r jzlre kjz r klzej</p>

＆＃13;

Answer 2

就我而言，我将这些元素放在Bootstrap .col-ms-x中。修复方法是添加appendTo和clone选项，如下所示：

$('#sortable').sortable({
    helper: 'clone',
    appendTo: document.body,
});

JQuery draggable +与容器相对的可排序问题

2 个答案: