jquery-ui-draggable

问题 I want to get the current index of the dragged item. Image attached of the scenario. First I drag the div to the master container then I have to get the index from master container ie is 0 . Then I drag the same element to the child container then I need to get the index from the child container ie is 1 . I have added this Fiddle to show how my code is right now. ('.container').sortable({ connectWith: '.container', scroll: false, zIndex: 10000, placeholder: "control-placeholder", receive:

问题 I am using JQuery UI for drag and drop in my project. On the draggable element, I have Bootstrap (3.x) tooltip. Moving the mouse over the draggable shows the tooltip. I hope to remove/hide tooltip on the draggable clone when drag starts. I goolged and tested, but to no success. Here is jsfiddle setup of the whole thing. Link: http://jsfiddle.net/mddc/6md9h/18/ <div id="draggable" class="ui-widget-content"> <div data-toggle="tooltip" data-original-title="Tooltip to disappear when drag starts."

问题 I am trying to drag drop items between two lists, My requirements are, List A (with drag and drop to List B but not sortable) item 1 item 2 item 3 List B (with sortable and drag/drop to List A) item 4 item 5 item 6 i tried the .sortable() , but it makes the List A with sortable functionality, <ul id="sortable1" class="connectedSortable"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item

问题 I'm learning jQuery UI Drag and Drop. I've got vanilla code. I'd like the draggables to be able to drag horizontally and vertically. For some reason the draggables won't move horizontally yet. JS: $('.draggable').draggable({ containment: '#containerForDraggables', }); HTML: <div id="containerForDraggables"> <p class="draggable">Draggable #1</p> <p class="draggable">Draggable #2</p> <p class="draggable">Draggable #3</p> </div> Here's a jsfiddle: https://jsfiddle.net/VikR0001/dv48y1rb/15/ What

问题 I'm learning jQuery UI Drag and Drop. I've got vanilla code. I'd like the draggables to be able to drag horizontally and vertically. For some reason the draggables won't move horizontally yet. JS: $('.draggable').draggable({ containment: '#containerForDraggables', }); HTML: <div id="containerForDraggables"> <p class="draggable">Draggable #1</p> <p class="draggable">Draggable #2</p> <p class="draggable">Draggable #3</p> </div> Here's a jsfiddle: https://jsfiddle.net/VikR0001/dv48y1rb/15/ What

问题 I am looking for an example of drag and drop where the drag item has two distinct areas that have to match up with two droppable areas. Example: I would like the blue drag item to revert unless it is dropped in a position where each of its red children land on a green area. Ideally I would like to use jquery ui (as I have experience with it), but any javascript library would be fine, thanks in advance. 回答1: You can accomplish this by using a combination of draggable / droppable options. Given

问题 I am facing a drag/drop issue. I want always see the element which is dragging, and I want be able to scroll a specific div to drop the element in any cell of my table. I want also be able to drag element from any div to any div. This example works almost fine. My last problem is about the cell hoverClass property: when I am dragging an element from the "container A" near the border of the "container B", I implemented an auto-scroll behaviour to navigate in my table to reach any cells. But,

问题 In JQuery UI, I have a draggable, It have an option connectToSortable as below: $("#social li").draggable({ connectToSortable: '#form_builder_sortable', helper:'clone', revert:true }); '#form_builder_sortable' is a sortable as below: $("#form_builder_sortable").sortable(); I want 1 draggable list connect to multiple sortable list, such as: $("#social li").draggable( { connectToSortable: '#form_builder_sortable, #form_builder_sortable_sample', helper:'clone', revert:true }); Have you got any

问题 In JQuery UI, I have a draggable, It have an option connectToSortable as below: $("#social li").draggable({ connectToSortable: '#form_builder_sortable', helper:'clone', revert:true }); '#form_builder_sortable' is a sortable as below: $("#form_builder_sortable").sortable(); I want 1 draggable list connect to multiple sortable list, such as: $("#social li").draggable( { connectToSortable: '#form_builder_sortable, #form_builder_sortable_sample', helper:'clone', revert:true }); Have you got any

问题 I'm suing jquery ui draggable on a list of items that can be dropped on a .droppable list of other items. Here's a jsFiddle to show what I'm trying to do: <div id="container"> <div id="left-pane" class="pane"> <div class="item">Item A</div> <div class="item">Item B</div> <div class="item">Item C</div> <div class="item">Item D</div> </div> <div id="right-pane" class="pane"> <div class="item">Item E</div> <div class="item">Item F</div> <div class="item">Item G</div> <div class="item">Item H<