Add Drag Select Feature

[modbender]

Could you please add Drag Select feature, where we can drag and select multiple images. I tried to make it using: https://github.com/ThibaultJanBeyer/DragSelect But it's bugged. When I click a random button somewhere in the same page, the images gets deselected, selected images sometimes flickers, and some other bugs.

Here is how I initialized DragSelect to be used with image-picker:

new DragSelect({
      selectables: document.querySelectorAll('ul.thumbnails div.thumbnail'),
      onElementSelect: function(element) {element.classList.add('selected')},
      onElementUnselect: function(element) {element.classList.remove('selected')},
});

I know that by adding class to the element, it doesn't mean the option is selected, so is there a way to select the corresponding option using the div.thumbnail element?

[modbender]

Nevermind, found a way to do it: DragSelect init:

new DragSelect({
      selectables: document.querySelectorAll('ul.thumbnails > li'),
      onElementSelect: function(element) {selectImage(element)},
      onElementUnselect: function(element) {selectImage(element, false)},
    });

selectElement:

var ipick = $("select").data('picker');
function selectImage(elem, do_select=true){
    ipick.picker_options.forEach((imgp, i) => {
      if(elem == imgp.node[0]){
        imgp.option[0].selected=do_select;
      }
    });
    ipick.sync_picker_with_select();
}

[modbender]

@rvera I hope the last comment helps you in anyway. I'm closing this issue. Thanks for the awesome package.

[rvera]

Glad you could fix this @yashas123, can't take all the credit @Humni has been super helpful on keeping this project alive.

[modbender]

There are some problems with DragSelect itself though, like a click anywhere else after doing drag select will unselect all the elements. EDIT: nvm, easy solution is to: @rvera new DragSelect({ area: document.querySelector('ul.thumbnails'), selectables: document.querySelectorAll('ul.thumbnails > li'), onElementSelect: function(element) {selectImage(element)}, onElementUnselect: function(element) {selectImage(element, false)}, });

I guess now there is almost no bugs with this. :)