0

Take a look at this fiddle.

I need to have the two "linked" divs (which have ID's that are identical except for a suffix A and B) move in unison when dragged. I'm trying to write JS to handle this without going into the jquery ui library and messing it up. After reading the various option flags here, there doesn't appear to be a simple way to handle this.

HTML:

<body>
    <div class="template ui-sortable" id="template_epsemail_email">
        <div class="tmplcell moveable ui-sortable-handle" id="tmplchunk_1"> unlinked </div>
        <div class="tmplcell moveable ui-sortable-handle" id="tmplchunk_2"> unlinked </div>
        <div class="tmplcell moveable ui-sortable-handle" id="tmplchunk_3_A"> linked </div>
        <div class="tmplcell moveable ui-sortable-handle" id="tmplchunk_3_B"> linked </div>
    </div>
</body>

JS:

$(document).ready(function() {
    $('.template').sortable({
        containment: 'body',
        axis: 'y',
        items: '.tmplcell.moveable',
      });
});
JacobIRR
  • 8,545
  • 8
  • 39
  • 68
  • My mistake. Some possibilities [here](https://stackoverflow.com/questions/3774755/jquery-sortable-select-and-drag-multiple-list-items), but you don't have list items so I'm not sure how relevant it is. – isherwood Jun 16 '17 at 21:06
  • Or [here](https://stackoverflow.com/questions/5596748/sort-multiple-items-at-once-with-jquery-ui-sortable). I think a helper function is your ticket. – isherwood Jun 16 '17 at 21:06
  • There is not a simple way to do this. You can leverage `helper: function()` to build a grouped element. – Twisty Jun 16 '17 at 22:03
  • I was just looking at the `start: function()` flag and that seems like it may work better since `helper` is expected to return something. I can slice off the last two characters of my ID's and check for matches, that way the two "linked" divs are grouped. But from there, I need to find out how that group gets moved in unison. – JacobIRR Jun 16 '17 at 22:15
  • @JacobIRR still think the helper would work for you to create an element that contains both items. – Twisty Jun 16 '17 at 22:34
  • 1
    Something like: https://jsfiddle.net/Twisty/1r2b605a/ – Twisty Jun 16 '17 at 22:47

0 Answers0