CODEWITHSUNDEEP
jqueryjquery-uidraggablejquery-ui-sortablehandle
Gdubz
Gdubz

Reputation: 61

jQueryUI Draggable + Sortable Ignores Handle

I'm mostly wondering if anyone else has run into this issue when combining both Draggable and Sortable plugins from jQueryUI.

If I'm just using the Draggable plugin, it obeys the handle I've specified in the setup. However, as soon as I setup Sortable on the drop targets, Draggable seems to throw caution to the wind and let you drag the entire element, completely ignoring the handle that I've specified.

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

I've setup a JSFiddle here so you can see what I'm talking about: https://jsfiddle.net/4y8a8zpe/2/

Comment out the first line of the JS to see the handle working properly.

Note: While setting up this JSFiddle, I've also seem to come across some weird CSS issues, but feel free to ignore that.

Upvotes: 1

Views: 321

Answers (1)

allicarn
allicarn

Reputation: 2919

You might be able to get away with one or the other - they're very similar functionality. If not, sortable also has a handle option.

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>

Upvotes: 1

Related Questions