remove() doesn't work with draggable image

Question

I've a .dropzone div inside #trash where elements are deleted with .remove() as they are drop in it (with jquery ui .droppable and .draggable classes):

$('.dropzone').droppable({
    tolerance: 'pointer',
    accept: 'p',
    drop: function(event, ui){
        ui.draggable.remove();
        $('#trashanim').animate({opacity: '1'}, 'fast')
        $('#trashanim').animate({opacity: '0'}, 'slow');
    }
});

(#trashanim is a brief animation of a trash bin triggered with the drop event).

Works fine until I try it with an img: after the drop event on .dropzone, the image positions itself in the left-top corner, loosing all classes in the road and getting the attributes of that position in its tag (when I test with images, I do change the accept parameter of the ui class to be able to recive 'img'). The image is not deleted from its parent.

I have implemented event-delegation as showed in this post with no results.

EDIT: When I empty() the parent node dragging another element to #trash the image does dessapear from the node. It seems like it can be deleted, but when called from another element.

score 0 · Answer 1 · answered Jun 06 '16 at 22:31

0

You said you are working with an img - so I am assuming the element that you are dragging, it's tag is <img>

With that said, your droppable is set to only accept <p> tags.

Try changing the accept to accept: 'p, img'

answered Jun 06 '16 at 22:31

Adjit

10,134
12
53
98

LIke i wrote, i did change the accept parameter entirely to 'img', just to testing matters. Still doesn't work. I did notice something funny though: when I drag another , from another div, to the .dropzone, after the first wrong atempt, the new overlaps the previous, finally deleting it. Just for consider it. – severalwordtraps Jun 07 '16 at 00:40
@severalwordtraps can you reproduce the issue with a fiddle? – Adjit Jun 07 '16 at 01:20
I can't make jquery ui work on jsfiddle =/. (I should have said, I'm pretty new at this). – severalwordtraps Jun 07 '16 at 04:16

score 0 · Answer 2 · answered Jun 07 '16 at 10:42

Please provide the jsFiddle of your code, i was worked with jsfiddle and the jquery UI library can be added and work well in JSFIDDLE.

here is the code check it.

$("img").draggable();

$('#droppable').droppable({
  tolerance: 'pointer',
  accept: 'p, img',
  drop: function(event, ui) {
    ui.draggable.remove();
    $(this).addClass("ui-state-highlight");
    alert("dropped");

  }
});

div {
  min-width: 200px;
  height: 150px;
  border: 1px solid red;
  display: block;
  color: red;
  font-weight: bold;
  margin:20px;
}

<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>



<div id="droppable">
  Dropzone
</div>

<img id="draggable" src="http://dummyimage.com/100x100/000/ffffff.png&text=d+-+raval" alt="test">
<img id="draggable" src="http://dummyimage.com/100x100/000/ffffff.png&text=d+-+raval" alt="test">
<img id="draggable" src="http://dummyimage.com/100x100/000/ffffff.png&text=d+-+raval" alt="test">

score -1 · Answer 3 · answered Jun 07 '16 at 18:39

Thanks for the answer @Draval. I finally figure it out: the problem was with the 'origin' div from where the elements get dragged. Whit the problem, the div looked something like this:

    $(document).ready(function(){
    $('#tabs-1').droppable({
        accept: 'img, p',
        drop: function(event, ui){
            $('#tabs-1').append(ui.draggable);
            ui.draggable.draggable({containment: '#tabs-1'});
        }
    })
});

I needed the div to be able to accept elements from another div, and that's why I made it droppable. This made a conflict with the elements that were already in it (I don't really understand why). Also, I was working with jquery ui tabs, and didn't specify correctly the element that I was looking for to set droppable (it wasn't ('#tabs-1').droppable();, but just $('#tabs).droppable() You have to be careful with the jquery ui tabs element that you designate as containment also, and the one to which you will append the ui.draggable.

For better clarity, I made two separated functions: one for the elements that were already in the 'origin' div, and another to the ones who will be appended with the drag event from the #preview div:

    $(document).ready(function(){
    $('#tabs').droppable({
        accept: 'img, p',
    })
});

$(document).ready(function(){
    $('#tabs').droppable({
        accept: '#preview img',
        drop: function(event, ui){
            var position = ui.draggable.offset();
            $('#tabs-1').append(ui.draggable);
            ui.draggable.css('position', 'absolute')
            ui.draggable.offset(position);
            ui.draggable.css('zIndex', '1')
            ui.draggable.draggable({containment: '#tabs-1'});
        }
    })
});

I know I'll have to make a function to append the elements to the active tab and not allways to the #tabs-1 tab, but for now this resolves my confusion.

Thanks for the views and answers!

But honestly though, how would we have ever figured that out without you providing your HTML. You have to be clearer in your question, and make sure to give people the picture of your code. — Adjit, Jun 08 '16 at 13:54
Well, of course. But if i knew the problem was there from the begining, I wouldn't ask any question at all. — severalwordtraps, Jun 08 '16 at 19:46

remove() doesn't work with draggable image

3 Answers3