jquery-draggable

Clone draggable after dropping in targeted area with jQuery UI

由 佐手、 提交于 2019-12-10 10:14:40
问题 I want some images to drop in a targeted area as many times as possible. But the image drops for only one time. My jQuery UI code: $(function() { $( ".draggable img").draggable({ revert: "invalid", appendTo: "#droppable", helper: "clone" }); $( "#droppable" ).droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", drop: function( event, ui ) { $( this ).find( ".placeholder" ).remove(); var image = $(".ui-draggable"); $( "<img />" ).image.src.appendTo( this ); } }); });

Why does Draggable object have slow placeholder?

由 ╄→尐↘猪︶ㄣ 提交于 2019-12-08 17:09:31
问题 I really do not have a problem but, I have noticed that sometime the Draggable object has slow placeholders. I did this test: http://jsfiddle.net/X3Vmc/ $(function () { $("#myproducts li").draggable({ /*appendTo: "body",*/ helper: "clone", connectToSortable: "#mylist", tolerance: "pointer" }); $("#mylist").sortable({ placeholder: "sortable-placeholder", over: function () { console.log("over"); }, out: function () { console.log("out"); } }); }); Adding object of the list in the draggable is

Remove cloned image after adding another image with jQuery UI

由 让人想犯罪 __ 提交于 2019-12-08 07:23:08
问题 I have a nice solution from my previous question that successfully clones images after being dropped. Here is the code: $(function() { var makeDraggable = function(element) { element.draggable({ revert: "invalid", appendTo: "#droppable", helper: "clone" }); } $( "#droppable" ).droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", drop: function(event, ui) { var newClone = $(ui.helper).clone(); makeDraggable(newClone); $(this).after(newClone); } }); // Initalise the

Drag and drop using basic jQuery framework

由 别等时光非礼了梦想. 提交于 2019-12-07 04:22:00
问题 Is it possible to achieve drag and drop using basic jQuery script (without using jQuery UI)? 回答1: In HTML5, there's an attribute called "draggable". <div draggable='true'>Drag me</div> <div id='dropzone'>Drop it here!</div> You could make use of the following events: var onDragEnter = function(event) { event.preventDefault(); $("#dropzone").addClass("dragover"); }, onDragOver = function(event) { event.preventDefault(); if(!$("#dropzone").hasClass("dragover")) $("#dropzone").addClass("dragover

jQuery Draggables and Droppables Positioning

由 泄露秘密 提交于 2019-12-06 02:34:16
问题 I'm using jquery UI and jQuery draggable , all my draggables use jquery clone helper and appends the draggable to droppable . Here is my code $('#squeezePage #droppable').droppable({ tolerance: 'fit', accept: '#squeezeWidgets .squeezeWidget', drop: function(event, ui) { var dropElem = ui.draggable.html(); var clone = $(dropElem).clone(); clone.css('position', 'absolute'); clone.css('top', ui.absolutePosition.top); clone.css('left', ui.absolutePosition.left); $(this).append(clone); $(this)

Clone draggable after dropping in targeted area with jQuery UI

由 独自空忆成欢 提交于 2019-12-05 19:22:17
I want some images to drop in a targeted area as many times as possible. But the image drops for only one time. My jQuery UI code: $(function() { $( ".draggable img").draggable({ revert: "invalid", appendTo: "#droppable", helper: "clone" }); $( "#droppable" ).droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", drop: function( event, ui ) { $( this ).find( ".placeholder" ).remove(); var image = $(".ui-draggable"); $( "<img />" ).image.src.appendTo( this ); } }); }); Please see the demonstration here: jsFiddle example From the example you see that the image drops in the

JQuery UI Draggable & Droppable “Revert” and “Out” conflict

由 喜夏-厌秋 提交于 2019-12-05 05:30:33
问题 I am trying to make it so that multiple items that are draggable can only be dragged to 1 droppable. If dropped outside of a droppable then revert. Most of my code works except for one bug: User drags the item into the droppable. Then drags out (executes out function) then he fails to drop in a droppable (revert happens, drag goes back to its previous droppable). What has effectively happened is the droppable can now accept any drag (since the drag left, executing out) while the drag never

jQuery Draggables and Droppables Positioning

由 删除回忆录丶 提交于 2019-12-04 07:35:05
I'm using jquery UI and jQuery draggable , all my draggables use jquery clone helper and appends the draggable to droppable . Here is my code $('#squeezePage #droppable').droppable({ tolerance: 'fit', accept: '#squeezeWidgets .squeezeWidget', drop: function(event, ui) { var dropElem = ui.draggable.html(); var clone = $(dropElem).clone(); clone.css('position', 'absolute'); clone.css('top', ui.absolutePosition.top); clone.css('left', ui.absolutePosition.left); $(this).append(clone); $(this).find('.top').remove(); $(this).find('.widgetContent').slideDown('fast'); $(this).find('.widgetContent')

JQuery UI Draggable & Droppable “Revert” and “Out” conflict

由 那年仲夏 提交于 2019-12-03 20:26:50
I am trying to make it so that multiple items that are draggable can only be dragged to 1 droppable. If dropped outside of a droppable then revert. Most of my code works except for one bug: User drags the item into the droppable. Then drags out (executes out function) then he fails to drop in a droppable (revert happens, drag goes back to its previous droppable). What has effectively happened is the droppable can now accept any drag (since the drag left, executing out) while the drag never actually left due to revert. I have been trying to resolve this for several of hours and have gone

Jquery UI draggable not scrolling the sortable container

由 为君一笑 提交于 2019-12-01 06:34:01
I have some draggable items(#draggable li) which i am dragging and dropping them in a sortable(#sortable). The sortable is wrapped by two divs and the outermost div has overflow-y: scroll. The mechanism of drag and drop works fine until the sortable list expands and scrolls. When I try to drag and directly drop an Item on the sortable, i cannot get the sortable scrollbar to auto-scroll in the way I want to go(say want to go up to drop above the first element or go down to drop below the last element). But when I try to drag and sort the items among themselves the scroll bar auto-scrolls while
订阅 jquery-draggable