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

＆＃13;

$('.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'
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

jQueryUI Draggable + Sortable忽略句柄

1 个答案: