jquery-ui-draggable | 易学教程

Advantages of HTML 5 Drag and Drop over jQuery UI Drag and Drop

阅读更多关于 Advantages of HTML 5 Drag and Drop over jQuery UI Drag and Drop

I'm writing a new web application that needs to support drag and drop operations for elements on the page (not file drag and drop). This the answer to this question html5 vs jquery drag and drop recommends using Modernizr to check whether the browser supports HTML5 drag and drop and either use that support or fall back to an alternative like jQuery UI. Since they have quite different models, that means that all drag and drop code would have to be implemented and tested separately (very little shared implementation). It only seems logical to do that if there are significant, user-impacting

Make draggable element sortable within droppable using jQuery UI

阅读更多关于 Make draggable element sortable within droppable using jQuery UI

问题 RESOLVED So I studied sortable() with the connectWith attribute a bit more and found the solution was simpler than I expected, but I was thinking about it sort of backwards because of draggable() and droppable() . Here's the fiddle: http://jsfiddle.net/DKBU9/12/ Original question follows: This is an extension of a previous SO question that I felt should be kept separate. The original question is here: jQuery UI - Clone droppable/sortable list after drop event. It regards reinitializing the

How do I save the position of draggable & resizeable elements?

阅读更多关于 How do I save the position of draggable & resizeable elements?

I'm building a site which allows users to create an html page which can then be saved and shared on another site. I want them to be able to resize and drag the page elements. I can do this using jQuery, but I'm not sure how I then save that so that when the page is viewed elsewhere, it looks the same. I haven't decided yet how to store the page info, but what I'm thinking is that I can store each element in the database along with its absolute position, and its contents. Does that sound like a good plan? If so, how do I get the position for the div to pass to the php so that it can be saved?

jquery: how to update draggable clone id?

阅读更多关于 jquery: how to update draggable clone id?

问题 I want to add draggable items to a sortable list, which works fine in my example on http://jsbin.com/ipese5/35 Problem is that I want to update id of the cloned item when dragged to the sortable list. Strange thing is that the following code updates the id to "new-id" in de ui object (as I can see in my console), but the id is not changed on the actual page html. Anyone has a solution? $( "#init .block" ).draggable({ helper: "clone", connectToSortable: ".list" }); $(".list").sortable({

buttons can't made draggables by jQuery UI draggable()

阅读更多关于 buttons can't made draggables by jQuery UI draggable()

问题 The jQUery UI draggables sample named Default says that: Enable draggable functionality on any DOM element. But I'm not able to make them work on button s elements. I modified the Default sample to look like this: I just changed the div element to a button one with type="button" : <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Draggable - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> <script src="../../jquery

jQuery UI Draggable - connectToSortable without helper clone - or how to move items from one list to another

阅读更多关于 jQuery UI Draggable - connectToSortable without helper clone - or how to move items from one list to another

问题 Have a look at this example. The docs says that: helper must be set to 'clone' in order to work flawlessly Indeed, if I remove helper: 'clone' , strange things happen when dragging. The problem is that I'm not interested in the "clone" behavior. I would like the items to move from one list to another. Note: The original (left) list shouldn't be sortable. Any ideas? 回答1: I've been struggling with this same problem. If I do indeed set the helper to 'original' I get all kinds of jumpy and weird

Restricting the draggable area in jQuery UI

阅读更多关于 Restricting the draggable area in jQuery UI

问题 I am trying to create a draggable area within a div. It works fine but I do not want the white space outside the draggable area and hence want to limit the area that can be dragged. What I have come up so far is here in this fiddle. The image is initially positioned to the top-left of the parent div. If you drag it to the right or bottom, you can see the white space, which I wouldn't prefer. How can I restrict this? I think that it can be done using the Containment parameter in Draggable

Drop elements inside iframe only else revert

阅读更多关于 Drop elements inside iframe only else revert

问题 EDIT:1 This is drag.html (main page) - <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Sortable - Handle empty lists</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" /> <style> .drag {padding:10px;border

JqueryUI Draggable - Auto resize parent container

阅读更多关于 JqueryUI Draggable - Auto resize parent container

I have two divs, one within the other. The outer div (the container) is of arbitrary dimensions. The inner div is set to a specified dimension smaller than its container. I have applied jquery draggable to the inner div and I'm looking to automatically resize its parent container when I drag the inner div past the outer edges of the container. How can I go about doing this? I see a similar feature here on StackOverflow when asking a new question. The textarea for typing in a question has a div named 'grippie' which resizes the textarea. This is exactly the functionality I'm looking for, but

jQuery.draggable() - Revert on button click

阅读更多关于 jQuery.draggable() - Revert on button click

问题 I have several draggable & droppable elements on my page, which have accept properties. Currently my code is set up like: $(".answer." + answer).draggable({ revert: "invalid" , snap: ".graph" }); $(".graph." + graph).droppable({ accept: ".answer." + answer }); Therefore if the answer isn't correct, its reverted to its original position. The user also needs the ability to reset all on the page. I've tried the following, but it doesn't work: $("btnReset").click(function(){ $(".graph.A")