jQueryUI Draggable + Sortable 忽略句柄

Question

我主要想知道在结合 jQueryUI 中的 Draggable 和 Sortable 插件时是否有其他人遇到过这个问题。

如果我只是使用 Draggable 插件，它会遵循我在设置中指定的handle。但是，一旦我在放置目标上设置了 Sortable，Draggable 似乎就抛开一切，让你拖动整个元素，完全忽略了我指定的句柄。

$('.column-one, .column-two, .column-three').sortable({ revert : 150 });

$('.tile').parent().draggable({
    start: function() {},
    stop: function() {},
    handle: '.tile-draggable',
    connectToSortable: '.column-one, .column-two, .column-three'
});

我在这里设置了一个 JSFiddle，所以你可以看到我在说什么： https://jsfiddle.net/4y8a8zpe/2/

注释掉 JS 的第一行，看句柄是否正常工作。

注意：在设置这个 JSFiddle 时，我似乎也遇到了一些奇怪的 CSS 问题，但请随意忽略。

Answer 1

您也许可以摆脱其中的一种——它们的功能非常相似。如果没有，sortable 也有一个句柄选项。

http://api.jqueryui.com/sortable/#option-handle

$('.column-one, .column-two, .column-three').sortable({
  revert: 150,
  handle: '.tile-draggable'
});

$('.tile').parent().draggable({
  start: function() {},
  stop: function() {},
  handle: '.tile-draggable',
  connectToSortable: '.column-one, .column-two, .column-three'
});

.column-one,
.column-two,
.column-three {
  display: inline-block;
  width: 320px;
  height: 600px;
  padding: 0 10px;
  background-color: #fffbf2;
  margin-right: 10px;
  box-sizing: border-box;
}
.abstract_tile {
  display: block;
  width: 300px;
  background-color: #fff2f6;
}
.tile {
  width: 300px;
  border: solid 1px #ccc;
}
.tile-top {
  background-color: #e3ffec;
  text-align: center;
  padding: 10px;
}
.tile-bottom {
  display: block;
  width: 100%;
  height: 100px;
  overflow-x: hidden;
  overflow-y: auto;
}
.tile-footer {
  background-color: #e3ffec;
  text-align: center;
  padding: 10px;
}
.tile-footer .left {
  float: left;
}
.tile-footer .right {
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>


<div class="column-one">
  <div class="abstract_tile">
    <div class="tile">
      <div class="capped-module primary">
        <div class="wrap">
          <div class="tile-top tile-draggable">
            <h2>Title</h2>
          </div>

          <div class="tile-bottom">
            <ul>
              <li>Item #1</li>
              <li>Item #2</li>
              <li>Item #3</li>
              <li>Item #4</li>
              <li>Item #5</li>
              <li>Item #6</li>
              <li>Item #7</li>
              <li>Item #8</li>
              <li>Item #9</li>
          </div>

          <div class="tile-footer tile-draggable">
            <div class="left">Move</div>
            <div class="right">Add/Remove</div>
            <div style="clear: both;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>



</div>

<div class="column-two"></div>

<div class="column-three"></div>