draggable

问题 MDN, the spec, and every site I can find with Google says that all HTML elements can be draggable. However, in practice I find that I can't drag text inputs or textareas, even if they're disabled. For example, with the following code: <img src="http://www.placehold.it/350x150" draggable alt="Placeholder image"> <a href="http://example.com" draggable>Link</a> <input type="text" draggable> <input type="text" disabled draggable> I can drag the image and the link, but neither of the inputs can be

问题 I have a list of draggable items, and I wish to be able to drag them onto a sortable content block. Here’s my markup: <div class='items'> <div class="one">One</div> <div class="two">Two</div> </div> <div class="content"> <div class="block">Foo</div> <div class="block">Bar</div> </div> The thing is, that I want the dragged item to "become" a block as soon as the dragging starts and remain a block when it’s dropped. I have tried this: $('.items div').draggable({ helper: function(e) { return $('

问题 I have some DOM element which is draggable using jQuery UI.All are working fine but when i create some element using jQuery , then they are not draggable at all. i.e $('div.draggable').draggable(); //Existing element , it works :) $('p.draggable').draggable() ; //Newly created paragraph with same class name, it doesnt work at all :( Thanks in advance !!! I am trying This : <script type="text/javascript"> $(document).ready(function(){ $('body').append('<p class="draggable">Newly Created

问题 I'm binding an ItemsControl with Canvas as ItemsPanelTemplate to an ObservableCollection. I want to make the items draggable using the DraggableExtender as posted in Dragging an image in WPF (I don't want to use transforms - I need to use the Canvas Left and Top properties) It's defined as : <ItemsControl ItemsSource="{Binding Path=Nodes}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <Canvas IsItemsHost="True" /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate>

问题 It works perfect in firefox, but in ie, chrome and opera it doesn't work. <div> has position:fixed, and is .draggable() and it doesn't work except firefox 回答1: don't set fixed in CSS: it works in firefox, chromium, safari, iexplore var div = $('#id'); div.resizable( { stop: function(event, ui) { var top = getTop(ui.helper); ui.helper.css('position', 'fixed'); ui.helper.css('top', top+"px"); } }); div.draggable( { stop: function(event, ui) { var top = getTop(ui.helper); ui.helper.css('position

问题 I currently have some dropdown menus which open on mouse over. I'm implementing some drag-n-drop features using draggable and droppable from jquery ui. It seems that the mouseover events for the menus do not fire when dragging, is there a way to allow them to work? I've implemented it as follows (simplified): $('#some_id').draggable({ helper: 'clone', opacity: 0.35, zIndex: 20000, cursor: 'move' }); $('#some_menu').live('mouseenter click', function(){jThis.find('div').addClass('opened');});

问题 the marker can drag , so the Custom Overlays can drag too , so how to make the Custom Overlays draggable , thanks 回答1: I recently put together a solution on a similar thread that applies greatly to this question as well: Here is the other Stack Overflow Thread Showing how to create a custom overlay in V3 with a draggable object Here is the working example: http://www.johnmick.net/drag-div-v3/ Here is some of the source: http://www.johnmick.net/drag-div-v3/js/main.js To make the Custom Overlay

问题 I have an app with a draggable UIView placed at the bottom. The draggable view isnt totally offscreen and it has a "pull tab" that the user can drag upwards or downwards. Dragging up and down currently works, but I would like to give it the same behavior as the Apple notifications slide out drawer. For example, if I drag the view out 50% upwards and remove my finger from the screen, then I'd like the draggable view to continue to move upwards on its own. Likewise, if the user only dragged the

问题 I'm using jQuery and I have the following problem: In my site I have a chessboard with pieces. Every square is a simple div with the background property to show white or black. Over these squares (inside the divs) I've put an img tag referencing the piece that must be over that square. Something like: <div id="a8" class="square" style="background-image: url('/images/background_white.png')"> <img id="piece_a8" class="piece" src="/images/rook_black.png" /> </div> I can control the movement of

问题 With jQuery I have a draggable element. It's a div with a size of 200 x 40. Of course the user can start dragging this div by clicking at variuos positions in the div. What I want is when the startdrag event happens, the helper (clone) div will always be aligned to the cursor the same way, no matter where in the div the user started dragging. So after the mousedown the helper's top and left values need to be the same as the mouses x and y. I've tried this using this coffeescript code: