jquery-ui-draggable

Getting jQuery sortable, droppable and draggable to work together

由 纵然是瞬间 提交于 2019-12-09 11:59:25
问题 I am trying to use jQuery sortable, droppable and draggable to work together. I have 3 lists: a break-point placeholder; report rows; report groups. The user should be able to: Drag as many placeholder copies into the 'report rows' list Drag one-at-a-time a single 'report group' (not a clone) into the 'report rows' collection (but not vice-verse)...until no more report groups are left. The user should be able to sort the report rows list ad nauseum. My problem is... I cannot get Number 2

jQuery UI Draggable/Sortable - Dynamically added items not draggable

由 試著忘記壹切 提交于 2019-12-09 04:44:37
问题 I have a Draggable/Sortable set of lists that I am dynamically adding items to, but the trouble is, that once an item has been added, it's not possible to move them to the new lists. You can see the functionality here: http://jsfiddle.net/Y4T32/2/ Drag an item from the available list to one of the target lists, and you'll see that I mean. Now add a "callout" and try to drag the new item to one of the target columns. I found another answer on here that works as I want, but have been unable to

How to fix wrongly positioned draggable helpers for connected sortables (partially caused by floated/relative positioned parent elements)?

由 孤人 提交于 2019-12-09 04:35:44
问题 Preface I'm experiencing a problem where the draggable helper is being offset incorrectly, when using draggables + sortables that are placed in floating, relative positioned parent elements. The floated parent elements are Bootstrap columns, where multiple sortable lists are placed in one column, and a list of draggables is placed in another. Example Here's a working example snippet $('.sortable').sortable({ connectWith: '.sortable', revert: 600, forcePlaceholderSize: true, placeholder: 'ui

Can't get JQuery Draggable plugin to work?

由 人盡茶涼 提交于 2019-12-09 01:33:19
问题 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

jQuery drag and drop colour div to change background of another

由 跟風遠走 提交于 2019-12-08 14:15:38
I have the following HTML , containing 4 <div> 's - 2 are doors and 2 are colors, as you can guess from their id . I'd like to be able to drag either colour to either door (such as blue on the left door and black on the right) and change the background colour on the style. <div id="door1" style="background: #fff;"></div> <div id="door2" style="background: #fff;"></div> <div id="black"></div> <div id="blue"></div> I'd be grateful even if someone could point me in the right direction at least. You should initialize your color <div> 's as draggable and door <div> 's as droppable widgets using

How to select all divs that overlay with a draggable div in jquery?

由 我的未来我决定 提交于 2019-12-08 13:44:46
问题 I'm building a graph displaying events happening over time. Each of my event is an horizontal bar that is created using a <div> as shown below: <div class="aaaa" style="margin-left: 0.00%; width:100.00%;">aaaa</div> <div class="aaaa" style="margin-left: 5.00%; width: 20.00%;">bbbb</div> <div class="aaaa" style="margin-left:25.00%; width: 50.00%;">cccc</div> <div class="aaaa" style="margin-left:55.00%; width: 45.00%;">dddd</div> At the top of this graph, I have a "ruler" which is a draggable

Draggable/Droppable for Battleship game

由 試著忘記壹切 提交于 2019-12-08 08:24:58
问题 I've been experimenting with the jQuery UI draggable/droppable interaction to allow a user to set ships for a game of Battleship. As far as I can tell, droppable interactions work just fine when the drop location is appropriately sized to fit a draggable item, but in the Battleship game, you have ships of several different lengths that fit into a number of squares ranging 2-5. If you check out this jsFiddle (http://jsfiddle.net/cDqGN/), and mess around with the ship of length two (versus the

IE iframe widget and jQuery drag and drop alignment issue

由 坚强是说给别人听的谎言 提交于 2019-12-08 07:33:07
问题 I have created a small widget using jQuery UI and drag-drop plugins. Now, I am finding some issues with IE. This widget can be accessed at - http://widget.adipa.com. At this URL, widget works well with IE7/8. But when I embed this widget inside the iframe, as done here, it starts giving misaligning tiles. In the image show below, it can be seen that tiles are placed with little white spaces in between - As seen here, between A and E, it has the white space. You can check the widget in iframe

jQuery drag and drop colour div to change background of another

由 假装没事ソ 提交于 2019-12-08 04:14:07
问题 I have the following HTML , containing 4 <div> 's - 2 are doors and 2 are colors, as you can guess from their id . I'd like to be able to drag either colour to either door (such as blue on the left door and black on the right) and change the background colour on the style. <div id="door1" style="background: #fff;"></div> <div id="door2" style="background: #fff;"></div> <div id="black"></div> <div id="blue"></div> I'd be grateful even if someone could point me in the right direction at least.

CSSMatrix equivalent in Firefox?

由 元气小坏坏 提交于 2019-12-08 02:43:51
问题 I'm currently developing a tiny "draggable for mobile widget", basically it implements only part of the interface of the jQUery UI Draggable widget (The part I needed for my project). I Know I can simulate the mouse events and make the jQuery UI Draggable to work properly on the mobile/tablet platforms, but the main issue with that approach is that it does not feel smooth enough, and since the CSS3 Transforms are hardware accelerated, using translate3d instead of changing the top, left
订阅 jquery-ui-draggable