droppable

When Drag a object from one div to another , format gets changed

由 只谈情不闲聊 提交于 2019-12-08 10:40:21
问题 When a object is dragged and dropped from one div to another, the format in li gets changes to text only. I want it in the same format and style i.e 'li' after droping it. $(function() { $( "#catalog ul" ).sortable({ zIndex: 10000, revert: true }); $( "#catalog" ).accordion(); $( "#catalog ul" ).draggable({ appendTo: "body", helper: "clone", zIndex: 10000 }); $( "#dialogIteration ol" ).droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", drop: function( event, ui ) { $(

Drag and Drop in nested dataTables

由 五迷三道 提交于 2019-12-07 09:55:06
问题 I am using primeface 4.0. The primeface showcase only shows how to drag a draggable in to a droppable . But then how to drag a that draggable out of that droppable is never mentioned. I wantto make a dataTable that: Each td cantains a droppable panel which multiple draggable can be both draged in to and out of . A back bean object that "keeps data" of this dataTable, which I assume if the dataTable is 2*2, there will be 4 List in the back bean, each stores a list of draggable objects of

Remove a dragged element and reset cursor with jQuery

由 笑着哭i 提交于 2019-12-07 08:37:12
问题 I have a problem using drag and drop with jQuery. Here's a very simple fiddle that shows what I mean (http://jsfiddle.net/Znt44/1/): $('#drop').droppable({ drop: function (e, ui) { ui.draggable.remove(); } }); $('#drag').draggable({ cursor: 'move' }); As you see, I set the cursor to a crosshair when dragged, which works. If you drop the green box on the red one, the cursor will not reset. It looks like the cursor is attached to the red box as well, and is not resetted. If you drop the green

How to get the dropped item's id on drop event jquery

由 谁说胖子不能爱 提交于 2019-12-07 03:35:49
问题 When I drop something to jquery droppable, I want to get the dropped items' id. When I did it like this: $("#here").droppable({ tolerance: 'fit', accept: ".one", drop: function(){ id = $(this).attr("id"); alert (id); } }); it of course alerted the id of the droppable here . How can I select the id of the dropped div? 回答1: Change your drop function to take two arguments: event, ui function(event,ui){ var draggable = ui.draggable; var id = draggable.attr("id"); } The draggable that is being

Draggables Jquery UI, disable individual div on droppable

由 时光毁灭记忆、已成空白 提交于 2019-12-06 09:58:59
问题 I'm trying to make some educational site and one of the things I want to have the students do is drag items to an area before being able to proceed to the next stage. I was thing the way to do this was use the jquery droppables script and have the items draggable option disable when it is dropped in the droppable div. Then I was going to add 1 to a variable, when it gets to the right number the button to advance would be enabled. The problem is that I can't figure out how to make the

Drag and Drop in nested dataTables

由 你说的曾经没有我的故事 提交于 2019-12-05 13:07:41
I am using primeface 4.0. The primeface showcase only shows how to drag a draggable in to a droppable . But then how to drag a that draggable out of that droppable is never mentioned. I wantto make a dataTable that: Each td cantains a droppable panel which multiple draggable can be both draged in to and out of . A back bean object that "keeps data" of this dataTable, which I assume if the dataTable is 2*2, there will be 4 List in the back bean, each stores a list of draggable objects of corresponding droppable area. Kinda like a simpler version of p:schedule that allows events to be drag and

jQuery UI draggable element dropped into sortable

由 三世轮回 提交于 2019-12-05 08:17:45
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 $('<div>').addClass('block').text( $(e.target).text() ); }, connectToSortable: ".content" }); $('.content'

jQuery sortable with droppable

由 梦想的初衷 提交于 2019-12-05 02:24:18
问题 My fiddle: http://jsfiddle.net/Yc9WY/42/ What you'll see here are two groups, each with 3 droppable containers defined. You can move events from group 1 to group 2, and into any slot. This works just fine. Once a group is full, I would like to give the user the ability to sort that group by moving events up and down. They should still be able to move the event out of the group if they choose however. You'll see my commented out code where I began to integrate the sortable library, but am

jQuery droppables - Change element on drop

由 丶灬走出姿态 提交于 2019-12-04 13:34:38
问题 I'm a bit new to jQuery and hope somebody can help me out. I'm trying to change an element (li) to another element (div) after the (li) has been dropped. Sample code: $("#inputEl>li").draggable({ revert: true, opacity: 0.4, helper: "clone" }); $("#dropEl") .droppable({ accept: ".drag", hoverClass: "dropElhover", drop: function(ev, ui) { // change the li element to div here } }); The problem is, when i use drop: function(ev, ui) { $(ui.draggable).replaceWith("<div>Some content</div>"); } the

jQuery UI Multiple Droppable - drag whole div element & clone

由 ε祈祈猫儿з 提交于 2019-12-04 12:27:34
I've just started using jQuery UI to drag divs into a columns in a table. I have a couple different draggable divs with different background-colors and text inside them, and I need them to be able to dragged up to the drop area as a clone. This worked fine by using jQuery UI's example shopping cart code, but I've edited it so the whole object is dragged instead of just the text, but this then eliminates the clone functionality for some reason, even though I have helper:clone. Here is my code: <script> $(function() { $( "ul li" ).draggable({ appendTo: "body", helper: "clone"}); $( ".day #drag"
订阅 droppable