Remove items from a sortable list

[Phaet]

I created now a sortable list of thumbnails. This works like charm. 😀

I want also to allow users to remove a thumbnail from the list, either by just dragging the thumb outside the parent container or to another container, working as "waste bin".
For the latter, I tried to apply .draggable simultanously to the sortable items with a callback function for the drop target.
But this does not work. (Of course, should I say).

Is there a way I could accomplish this remove function one or the other way?

(I must admit that my js knowledge is too limited to understand what's going on in the draganddrop.js.)

[gardiner]

Hi Phaet, thanks for checking out this plugin. I have no immediate solution for your question. I would probably start by adding a "remove" or "trash" button to the sortable items to remove them by clicking that button. If that's not an option I'd try to register a droptarget (every sortable is also a draggable) or add a custom event handler for mouserelease events. I'll try to come up with a small prototype but maybe these ideas can already help you out. Cheers!

[Phaet]

Hi Gardiner, I really appreciate your thoughts and effort.
Adding a remove button would also be an option. (I found a proposal for that at stackoverflow). But on mobile a kick-out gesture would be the more natural method. So I would highly appreciate a droptarget and the related event handler.
Have a pleasant Sunday afternoon.

[gardiner]

Well, I have tried for a while now and it does not seem to be easily achievable with this lib. The main problem is that while dragging a clone of the dragged element is positioned at the mouse pointer which makes checking for a possible drop target tricky. You can overcome this by adding pointer-events: none; to the class .sortable_clone, but then you still have to track manually what element is being dragged and when a mouse-up event occurs.
Anyway, my best solution so far looks like this (only working with pointer-events: none on .sortable_clone!):

        var $dragged = null; //contains the currently dragged element if any

        $('.list').sortable({
        })
        .on('dragstart', function(evt) {
          $dragged = $(evt.target); //store currently dragged element
        })
        .on('dragstop', function(evt) {
          $dragged = null;  //unset stored element
        });

        $('.trash')
        .on('touchend mouseup', function(evt) {
          var $el = $dragged;
          if ($el) {
            window.setTimeout(function() {
              $el.remove(); //remove element but wait for all drag/drop events to be completed
            }, 10);
          }
        });

It is working, but not very elegant... sorry. Cheers!

[Phaet]

Hey, this looks like a solution. I'm going to try it asap.

Just one more thought: You were saying that sortable elements are naturally draggable. So I wonder, why sortable does not provide the droptarget and drop options (inherited from draggable)?

[gardiner]

Yeah that was my initial thought. But apparently I hadn't considered that possibility when writing the lib, so it doesn't work this way in its current state. But I'm definitely considering to integrate this possibility into an upcoming version! Cheers!

[Phaet]

Great! Looking forward to it then.

[Phaet]

I found now a rather simple solution consisting of two grouped lists, one of which is the waste bin and initially empty. When pressing Upload, only the images in the first list are uploaded, while the others are ignored. Or in case images already uploaded to the server, those in the waste bin are deleted from the server.

[gardiner]

Clever, I like it! Straightforward and no hacks needed :) Thanks for letting me know! Cheers.