Krzysztof Modrzewski Krzysztof Modrzewski - 4 months ago 29
Javascript Question

Sortable function on click and hold

it is my firs question so I want to say hello :) I really love stackoverflow and you are my experts in coding :)

But now I have a problem and I didon't find any answer in whole internet :P

I have sortable div's and it works fine ($("#sortable").sortable();)

Now I want to make it sortable but only when I click and hold a button with name "move". Any other click on div should not make div's sortable.

Div with button is inside each sortable div.

Example code:

<div id="sortable">
<div id="first">
<img src="...">
<button>Move</button>
</div>
<div id="second">
<img src="...">
<button>Move</button>
</div>
<div id="third">
<img src="...">
<button>Move</button>
</div>
</div>


Have You any idea how to mange this? I have tried id (from none to sortable) changing on mouseover or click on button but it didn't work.

Thank You so much :)
Best regards
Krzysiek

Answer

Of course, you can restrict 'sort start' click to a specific element by using handle option:

$( "#sortable" ).sortable({
  handle: "button",
  cancel: ""
});

$("#sortable").sortable({
  handle: 'button',
  cancel: ''
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<div id="sortable">
  <div id="first">
    <img src="...">
    <button>Move</button>
  </div>
  <div id="second">
    <img src="...">
    <button>Move</button>
  </div>
  <div id="third">
    <img src="...">
    <button>Move</button>
  </div>
</div>

I hope this will help you.

Comments