jquery-ui-draggable

Connecting a Draggable to Sortable causes helper element to jump

由 Deadly 提交于 2019-12-01 19:01:28
问题 I have a jQueryUI draggable object and a sortable object on the page. Dragging an element from the draggable to the sortable causes the dragged element to jump up to the top left of the page . Here's the demo: http://jsfiddle.net/travisrussi/aBhDu/1/ To reproduce: Drag 'Item 5' from the draggable div (top box) to the sortable div (bottom box) Actual result: Item 5 jumps to top left corner when dragged over the sortable - http://i.stack.imgur.com/474OP.jpg It appears the dragged element

Draggable Resizable not working in Chrome

由 大城市里の小女人 提交于 2019-12-01 10:53:18
I am having some issue with making resizable and draggable work together on an image in chrome. My page has a list of (draggable) images on the side, which can be dropped on a div(the images are cloned). The dropped images should be resizable and draggable. I've written the following Javascript: $(function() { $(".scrollable").scrollable(); $(".draggable").draggable({ helper: 'clone', appendTo: 'body' }); $("#canvas").droppable({ accept: '.draggable', drop: function(e, ui){ if (ui.draggable.attr("class").indexOf('item') == -1){ var clone = $(ui.draggable).clone(); clone.removeClass("ui

multiple droppable

由 耗尽温柔 提交于 2019-12-01 08:49:36
I've have multiple droppable divs (which all have the same size) and one draggable div. The draggable div is 3 times bigger than one droppable. When I drag the draggable div on the droppables divs I want to find which droppable has been affected. My code looks like this: $(function () { $(".draggable").draggable({ drag: function (event, ui) { } }); $(".droppable").droppable({ drop: function (event, ui) { alert(this.id); } }); }); the html <div style="height:100px; width:200px; border-bottom:1px solid red; " id="Div0" class="droppable"> drop in me1! </div> <div style="height:100px; width:200px;

Draggable Resizable not working in Chrome

由 谁说我不能喝 提交于 2019-12-01 07:42:50
问题 I am having some issue with making resizable and draggable work together on an image in chrome. My page has a list of (draggable) images on the side, which can be dropped on a div(the images are cloned). The dropped images should be resizable and draggable. I've written the following Javascript: $(function() { $(".scrollable").scrollable(); $(".draggable").draggable({ helper: 'clone', appendTo: 'body' }); $("#canvas").droppable({ accept: '.draggable', drop: function(e, ui){ if (ui.draggable

Make Cursor position in center for ui.helper in jquery-ui draggable method

由 孤人 提交于 2019-12-01 06:05:41
I want cursor to be in center for ui.helper of draggable . I am doing this like this $(".soclass").draggable({ cursor: "move", helper: 'clone', revert: "invalid", tolerance: "fit", start: function(event, ui){ $(this).draggable("option", "cursorAt", { left: Math.floor(ui.helper.width() / 2), top: Math.floor(ui.helper.height() / 2) }); } }); Using this i get cursor in the center only after First drop . How can I center align the cursor right from first drop. Jsfiddle Julien Grégoire You can access the offset.click property of the draggable instance, which is pretty much what setting the cursor

jQuery draggable, event when dropped outside of parent div

由 不问归期 提交于 2019-12-01 05:48:47
I have a list of photos, and I have draggable added to them, however when the photo is dragged outside of the parent div, I want to change it's class so it indicates that if you drop it, it will be removed, and then when the user drops it, I want it to fire a function. (only if it is outside of the parent div) <ul class="photos"> <li><img src=""/></li> <li><img src=""/></li> </ul> so when an li is dragged outside of .photos, it fires to add class, and then if it's dropped outside of it, then it fires and event to remove it. Assuming the parent div you mention is a droppable, you can bind an

Make Cursor position in center for ui.helper in jquery-ui draggable method

由 安稳与你 提交于 2019-12-01 03:50:14
问题 I want cursor to be in center for ui.helper of draggable . I am doing this like this $(".soclass").draggable({ cursor: "move", helper: 'clone', revert: "invalid", tolerance: "fit", start: function(event, ui){ $(this).draggable("option", "cursorAt", { left: Math.floor(ui.helper.width() / 2), top: Math.floor(ui.helper.height() / 2) }); } }); Using this i get cursor in the center only after First drop . How can I center align the cursor right from first drop. Jsfiddle 回答1: You can access the

jQuery UI how to set draggable containment option on parent's parent

由 混江龙づ霸主 提交于 2019-12-01 03:09:19
The jQuery UI Draggable interaction has a nice property for setting the containment as the parent. $( ".selector" ).draggable({ containment: 'parent' }); I wish to set the containment as the parent's parent. There is no string value to accomplish this, as string the options are 'parent', 'document', 'window', [x1, y1, x2, y2] I could calculate x1,y1,x2,y2 of the parent's parent at page load and use those values to set boundaries for a container relative to the document. But the container position can change relative to the parent's parent position if the window is resized after page load. The

Can click on jquery draggable parent start drag?

由 百般思念 提交于 2019-12-01 00:48:30
I have markup like this <div id="colorpicker-background"> <div id="colorpicker-selector"></div> </div> With JS like this: $('#colorpicker-selector').draggable({ containment : $('#colorpicker-background'), handle : $('#colorpicker-selector') }) When the user onmousedown fires on #colorpicker-background I move #colorpicker-selector to where the mousedown is. The problem is, the user can't continue to drag even though the selector is now under the cursor. I have tried triggering drag, dragstart, mousedown, mousedown.draggable on #colorpicker-selector based on all sorts of posts I've read and am

Can't get JQuery Draggable plugin to work?

由 让人想犯罪 __ 提交于 2019-12-01 00:20:39
I'm very new to JQuery and I'm trying to create a sample page using the Draggable plugin. The page loads fine, but I'm not able to drag my <div> tag anywhere. I've been trying to copy this demo . Here is my code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> <style type="text/css"> #draggable { width: 150px; height: 150px; padding: 0.5em; border: solid 1px black; cursor:pointer;} </style> </head> <body> <form id="form1" runat="server">
订阅 jquery-ui-draggable