jquery-ui-draggable

问题 I used bootstrap css and JqueryUI to create a list in draggable <ul> and made a <div> as droppable area. Now the drag and drop both work properly. <ul id="showdata" class="list-group ui-helper-reset ui-droppable" style="overflow: auto; height: 200px; display: block;"> <li class="list-group-item ui-draggable ui-draggable-handle">_Unassigned_<a href="#add" id="add_id" class="glyphicon glyphicon-plus" title="add group to selection" style="float: right"></a> </li> <li class="list-group-item ui

问题 I'm trying to set up drag and drop cloning with Knockout and jQuery, but I can't figure this bit out. I have the knockout-sortable binding that Niemeyer wrote, but I can't find a way to hook it up how I'd like. I was hoping the connectClass would be able to "catch" drops and pass them into the child element Sortable, but apparently not. Here's a fiddle I forked from Niemeyer that shows pretty simply what I'm trying to do. http://jsfiddle.net/Kal_Torak/g74xN/3/ My Sortable bound elements aren

问题 I want to have a draggable that is contained within it's parent, and then I want to restrict it further to stay within a certain rectangle within the parent: item.draggable({containment:"parent",axis:"x",handle:item.children()}); item.draggable('option','containment') "parent" item.draggable('option','containment',[0,0,250,0]); item.draggable('option','containment') [0,0,250,0] I want it to be both "parent" and [0,0,250,0] at the same time, but the problem is that as soon as I set the

问题 I have a droppable container with >1 draggables in it. I want to simply be able to see the position of each draggable every time any one of them is dragged. Sounds easy, but I'm having a tough time figuring it out. Here's what I have: <script type="text/javascript"> $(function() { $("#draggable").draggable({ containment: '#droppable' }); $("#draggable2").draggable({ containment: '#droppable' }); $("#droppable").droppable({ drop: function(event, ui) { document.getElementById('position1').value

问题 I've got a, fixed position, image that I'm animating with CSS and moving down the edge of the screen when the user scrolls. - Works great. When the image gets to the bottom of the screen the user can click on it and it animates back to the top. - Also working well. I'm also trying to allow the user to drag it to the top using jQuery-ui Draggable. - Here complications arise. I need the image to only be dragged up, never down, so I've restricted my draggable element to drag up only, by moving

问题 I need to use Text area like this image. I should able to click Text A , Text B , Text C , Text D buttons and, once I click any of this button it should add to the Text area and also able remove added text field from the Text area. Can I do it using jQuery UI , jQuery or JavaScript . Kendo UI is also okay. but I'm unable to found my requirement support Kendo component to do this. I researched and found this http://skfox.com/jqExamples/insertAtCaret.html , but it's not support added text

问题 I am developing some simple drag-drop interactions with jQueryUI. Under some conditions, I would like the dragged item to go back to its original place (revert) and then shake. I placed the shake in the drop event of the droppable object, but it doesn't seem to wait for the revert to be finished. What's worse, sometimes it shakes before starting to revert to the original position, other times it shakes after the full revert has been done, and other times the shake gets caught up in the middle

问题 I would like to implement the following: I have a source container populated with a list of draggable items I have a target sortable container populated with items of the same kind as the source items When I drag/drop an item from source to target, I would like to decide what to do with the draggable (helper clone): insert before item mouse is over replace item mouse is over <-- New requirement! insert after item mouse is over Any help is highly appreciated! Thanks! Example (without the

问题 I have a droppable element with a dropover event handler. Dragging an element over the droppable expands a node. However, I want to add a delay so the node does not expand immediately, i.e. you have to hold the draggable over the droppable for a second before it expands. droppable.over = function(event, ui) { // expand node if dragover lasts 1000 milliseconds node.expand(); }; My first thought was to simply use setTimeout on node.expand() , but this doesn't do what I want, it simply delays

问题 Basically what I have is a set of doodads , and what I need to do is to be able to drag any item in that set into a containment box. Once they are in the box, they can still be moved around and manipulated freely, but they can't be taken out of the box again though they can be deleted. The doodads are also set to clone as a user can have more than one of the item in the box if they so desire. So the two parts are, set up the doodad list (already done), and then make it draggable so that it