Remove item on drag out JQuery

Question

I want to enable the option to drop out from droppable I actilly found exactly what I need here, but I am probebly using other library then his/ I want to "translate" the lined anser to the library that I am using. I am using this library

The code from the accepted answer:

$(".draggable").draggable({
    cursor: "move",
    revert: "invalid",
    helper: "clone"
});

$(".droppable").droppable({
    accept: '.draggable',
    hoverClass: "ui-state-active",
    drop: function (ev, ui) {
        if ($(ui.draggable).hasClass('new')) {
            $('.new').draggable({
                revert: true
            });
        } else {
            $(this).append($(ui.draggable).clone().draggable({
                helper: "original"
            }).addClass('new'));
        }
    },
    out: function (event, ui) {
        $(ui.draggable).fadeOut(1000, function () {
            $(this).remove();
        });
    }

But I need something like

droppable.on('drag:start', () => {
   $('.source-point').addClass('show');
//...
});
droppable.on('drag:stop', (evt) => {
   $('.source-point').removeClass('show');
//...
});

ikiK · Answer 1 · 2020-07-30T16:32:17.597

0

Try this:

its modified version of my answer to other question, see example.

var i = 0;
var removeClass="";

droppable.on('drag:start', () => {
   $('.source-point').addClass('show');
});
droppable.on('drag:stop', (evt) => {
   $('.source-point').removeClass('show');
 document.querySelector("."+removeClass).remove();
});


[...document.querySelectorAll('body *')].forEach(el => {
  el.addEventListener('mousedown', event => {
    el.classList.add("clicked"+(++i));
    console.clear();    
    removeClass="clicked"+(+i);
  })
})

edited Jul 30 '20 at 16:32

answered Jul 30 '20 at 16:24

ikiK

6,328
4
20
40

Why do you mix jQuery selectors and `document.querySelector`? – Sean Kendle Jul 30 '20 at 16:43
@SeanKendle My code is pure JS and I already had it written, I just copied one line into given code. And why wouldn't I? – ikiK Jul 30 '20 at 16:45
Just seems strange to go from `$(".className)` to `document.querySelector(".className")` in the same code. It's a consistency thing. – Sean Kendle Jul 30 '20 at 16:49
@SeanKendle That's medical OCD thing, not a coding problem :)) – ikiK Jul 30 '20 at 16:51
I'd hate to read your code, then. Consistency is very important in coding. – Sean Kendle Jul 30 '20 at 16:52
@SeanKendle Yeah yeah i know, its just for demo purposes anyway, user can edit that himself... And BTW by that logic, I could also then rewrite all JS to jquery... You know, to be consistent... And ps; yes you would hate it to read ;) I have my own logic. Its called organized mess. – ikiK Jul 30 '20 at 16:56

Remove item on drag out JQuery

1 Answers1