Question

我在代码中制作了一些可分类的div，让我先给你看一下代码！

$("#right-panel #images-section #box-section").sortable({
  cursor: "move",
  placeholder: "images-placeholder",
  containment: "document",
});

#right-panel #images-section {
  max-width: 960px;
  margin: auto;
}

#right-panel #images-section h4,
#right-panel #images-section h5 {
  color: #687182;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin-top: 40px;
}

#right-panel #images-section h5 {
  font-weight: 300;
  font-size: 14px;
  max-width: 650px;
}

#right-panel #images-section #box-section {
  margin-top: 70px;
  display: flex;
  flex-wrap: wrap;
}

#right-panel #images-section #box-section .images {
  flex-basis: 28%;
  margin-right: 2%;
  height: 305px;
  border: 1px solid #d82020;
  border-radius: 15px;
  margin-bottom: 20px;
  position: relative;
  cursor: pointer;
}

.images-placeholder {
  border: 8px dashed gray;
  margin-right: 2%;
  height: 305px;
  flex-basis: 28%;
  background-color: white;
}

#right-panel #images-section #box-section .images .div-count {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#right-panel #images-section #box-section .images .div-count h6 {
  margin: 0;
  font-size: 60px;
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  color: #687182;
  opacity: 0.2;
}

#right-panel #images-section #box-section #plus {
  cursor: pointer;
}

#right-panel #images-section #box-section #plus h6 {
  font-size: 100px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<div id="right-panel">
  <div id="images-section">

    <div id="box-section">


      <div class="images">
        <div class="div-count">
          <h6 sequence-id="1">01</h6>
        </div>
      </div>

      <div class="images" id="dosra">
        <div class="div-count">
          <h6 sequence-id="2">02</h6>
        </div>
      </div>

      <div class="images">
        <div class="div-count">
          <h6 sequence-id="3">03</h6>
        </div>
      </div>

      <div class="images">
        <div class="div-count">
          <h6 sequence-id="4">04</h6>
        </div>
      </div>

      <div class="images">
        <div class="div-count">
          <h6 sequence-id="5">05</h6>
        </div>
      </div>

      <div class="images">
        <div class="div-count">
          <h6 sequence-id="6">06</h6>
        </div>
      </div>

      <div class="images">
        <div class="div-count">
          <h6 sequence-id="7">07</h6>
        </div>
      </div>

      <div class="images">
        <div class="div-count">
          <h6 sequence-id="8">08</h6>
        </div>
      </div>
    </div>
  </div>
</div>

现在正在发生的事情是当我拖到另一个div时我必须一直移动到当前div的末尾以使div移动我想要的是缩短距离，例如当我开始移动div时当我达到div的50％时想要转移下一个div。请尝试通过占位符css拖放到您可能会注意到问题的地方！

任何帮助？

Fiddle

Answer 1

试试这个：

$("#right-panel #images-section #box-section").sortable({
            // Move when mouse pointer overlaps the other item
            tolerance: "pointer",
            // set cursor position in center
            cursorAt:{ top: $('.images').height()/2, left: $('.images').width()/2 },
            containment: "document",
});

Answer 2

要达到预期的结果，请使用容差并删除包含并使用帮助程序：“clone”

$("#right-panel #images-section #box-section").sortable({
            cursor: "move",
            placeholder: "images-placeholder",
   tolerance:"pointer",
   helper: "clone"
        });

https://codepen.io/nagasai/pen/yjNqGv

使用以下容差选项

“相交”：该项目与其他项目重叠至少50％。（默认公差）
“指针”：鼠标指针与其他项重叠。

点击此链接 - http://api.jqueryui.com/sortable/#option-tolerance

管理可排序的divs jquery

2 个答案: