You could also use jQuery data() like this.. if ($(elem).data(‘draggable’)) { alert(“yes”); } else { alert(“no”); } if ($(elem).data(‘fooable’)) { alert(“yes”); } else { alert(“no”); } See it here: http://bootply.com/60153
Had this problem just now – it is a Chrome bug, you must not manipulate the DOM in dragStart event, or else dragEnd fires immediately. The solution for me turned out to be – use setTimeout() and manipulate the DOM inside the function you timeout.
I found that Keith’s method worked for me. Since his answer doesn’t include an example implementation, I’ll post mine: $(‘.dropTarget’).droppable({ drop: function(ev, ui) { var dropped = ui.draggable; var droppedOn = $(this); $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn); } }); or, slightly more concisely: $(‘.dropTarget’).droppable({ drop: function(ev, ui) { $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this); } });
Touch-based devices like iPhone lacks all common mouse related events we are used to in desktop browsers. It does include: mousemove, mousedown, mouseup, among others. So, the short answer is, you will need to use a solution that have in mind “touch events” counterparts for those “mouse events” above: touchstart, touchmove, touchend or touchcancel. Take … Read more
By default, data/elements cannot be dropped in other elements. To allow a drop, you must prevent the default handling of the element when dragover. document.addEventListener(“dragover”, function(event) { // prevent default to allow drop event.preventDefault(); }, false);
All you need to do is use draggable({stack: “div”}) Now when you drag a div it will automatically come to the top. Check working example at http://jsfiddle.net/LQ4JT/8/
Normally when you have any kind of mouse event, you’ll want to have it only operate on one type of mouse click. Therefore, the events passed to your callbacks have a property which allow you to distinguish between types of clicks. This data is passed back through the button property of the event data. See … Read more
You may succeed this with a hacky solution. The native draggability doesn’t allow CSS styles like: opacity:0;, visibility:hidden or display:none. But you can do it using: transform:translateX(-9999px). function startDrag(e) { let element = e.target; element.classList.add(‘hide’); } function endDrag(e) { let element = e.srcElement; element.classList.remove(‘hide’); } .draggable { border-radius: 4px; background: #CC0000; width: 40px; height: 40px; … Read more
You can do with jquery only, without jquery UI: function handle_mousedown(e){ window.my_dragging = {}; my_dragging.pageX0 = e.pageX; my_dragging.pageY0 = e.pageY; my_dragging.elem = this; my_dragging.offset0 = $(this).offset(); function handle_dragging(e){ var left = my_dragging.offset0.left + (e.pageX – my_dragging.pageX0); var top = my_dragging.offset0.top + (e.pageY – my_dragging.pageY0); $(my_dragging.elem) .offset({top: top, left: left}); } function handle_mouseup(e){ $(‘body’) .off(‘mousemove’, handle_dragging) … Read more
In all presented answers, I don’t see the most simple and obvious one (maybe I’m missing something in OP question). But, if someone stumble upon this later, and needs fast and simple solution in pure JS.. You do it by changing element className ondragover, and changing back to original class ondragleave my_element.ondragover = function(ev) { … Read more