jquery-ui-draggable

问题 I have two lists. They are sortable but not connected (elements of list "one" cannot be mixed with elements of list "two") I want elements of list "one" be droppable and elements of list "two" be draggable, because I want to drag and drop element of list "two" into list "one". How should I do? EDIT: I tried to make the question as general as possible but maybe I should be more clear... sorry. Elements of list one are "categories" and they should be sortable. Elements of list two are "links"

问题 I have two lists. They are sortable but not connected (elements of list "one" cannot be mixed with elements of list "two") I want elements of list "one" be droppable and elements of list "two" be draggable, because I want to drag and drop element of list "two" into list "one". How should I do? EDIT: I tried to make the question as general as possible but maybe I should be more clear... sorry. Elements of list one are "categories" and they should be sortable. Elements of list two are "links"

问题 On my web page I have a div containing a sortable UL, and whenever I scroll to the bottom of my page and drag the last LI my page jumps and the scrollbar (on the entire window) grows. Here is a JSFiddle that almost captures my issue: www.jsfiddle.net/u5afykpf. To see something close to what is happening to me, scroll to the bottom and drag the last element downwards. You will see the scrollbar grow and shift. On my page however where there is a lot more content and height this causes a shift

问题 Basically I have a list of draggable items and initially one droppable element for them to be dragged into. When an item is dragged into the droppable, the droppable is cloned (before the item is appended) and appended as a new droppable area. Take a look at this stripped down fiddle: http://jsfiddle.net/DKBU9/1/ (omitted sortable()) HTML <ul id="draggables"> <li>foo1</li> <li>foo2</li> <li>foo3</li> </ul> <ul class="droppable new"> </ul> JS $('#draggables > li').draggable({ appendTo:

问题 I want to remove the drag property of a <div> when I drop it on a container. But I get an error "Property 'draggable' of object #<Object> is not a function" , for my code below. $( "#fighter1" ).draggable(); //fighter1 is the id of draggable object $( "#fighter2" ).draggable(); $( "#fighter3" ).draggable(); $( "#fighter4" ).draggable(); $( "#fighter5" ).draggable(); $( "#fighter6" ).draggable(); $( "#dest" ).droppable({ //dest is the id of droppable object drop: function( event, ui ) { ui

问题 I need to create a message template as follows, Hello Stackoverflow {Text A} Thank you for your support {Text B} In that case, I need to use drags and drop fields to Textarea , I did initial R&D to find some library to achieve my requirement and found this Inserting text with drag n’ drop $(document).ready( function() { $('#ClickWordList li').click(function() { $("#txtMessage").insertAtCaret($(this).text()); return false }); $("#DragWordList li").draggable({helper: 'clone'}); $("

问题 I need to create a customizable paragraph with JQuery UI . here is my code. $(document).ready(function() { var given = $("p.given").text(); var new_given = given.replace(/blank/g, ' <div class="blanks"></div> '); $("p.given").html(new_given); function updateDroppables() { $("div.blanks").droppable({ accept: "span.given", classes: { "ui-droppable-hover": "ui-state-hover" }, drop: function(event, ui) { var dragedElement = ui.draggable.text(); var dropped = ui.draggable; console.log(dropped);

问题 i want to know if its possible to use a function like .delegate() , .on() or any in a way that it will listen to jquery UI events such as draggable . I have the following: HTML: <div id="wrapper"></div>​ javaScript: $(function(){ var addMe='<div id="draggable" class="ui-widget-content"><p>Drag me around</p></div>' $( "#wrapper" ).delegate('#draggable','draggable',function(){ console.log('its something!'); }); //$(".draggable").draggable(); $("#wrapper").append(addMe) }) The element that is

问题 I have a sortable list in which are several elements that need to be able to be reordered by the user. Alternatively the elements can also be dragged onto 5 available dropzones ( droppable containers). The problem I am encountering is this: When the drop is successfully done on a droppable zone, the revert animation of the sortable is still playing animating the dropped element back into the sortable list. Instead I would like to animate it in a way that the helper is taken from where the

问题 im trying to collect the positions of multiple draggable elements using jQuery UI. At the moment I can get the position of one element, but when I move around another, both positions change. Please can someone assist me in getting the separate positions of multiple draggable items. http://codepen.io/anon/pen/nLGIl HTML <div class="dragThis" id="box-1"style="top: 100px; left: 50px;" > <h2>Test 1</h2> <p>This is a test</p> <ul> <li class="posX"></li> <li class="posY"></li> </ul> </div> <div