jquery-ui-droppable

问题 I have JQuery UI Droppables that are dynamically added to the page via Ajax. Attempting to follow the guidance to connect the Droppables in a live manner: jQuery UI Droppable : how to make it live? On the first attempt to drag-and-drop, the hoverClass is not hooked up nor is the drop target a registered Droppable (the drop event handler does not fire). On subsequent attempts, it works as expected. Fiddle: http://jsfiddle.net/ericjohannsen/ESCN9/ How can I get the drop functionality to work

问题 I want to append the dropped item into the targeted droppable box from the sortable list, but I cannot append the dropped item into the specific element. My jquery, $(".sortable").sortable({ update: function(){ // php update. } }).disableSelection(); $( ".droppable" ).droppable({ activeClass: "ui-state-hover", hoverClass: "ui-state-active", drop: function( event, ui ) { var targetElem = $(this).attr("id"); $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped! inside " +

问题 I am trying to build a layout page. this page has 1 main panel. if a user clicks "create new tab" I want to build a new div, and make that div droppable. In this watered down example. I want to click "Create new tab" and then be able to drop the "Other" div into it. see my fiddle: Fiddle $('#newTab').click (function() { i++; var div = $('<div class="drop"/></div>').appendTo('#mainBucket'); div.attr('id', 'holdy'+i); div.addClass('tabModule drop'); div.html('hello'); }); 回答1: You have to make

问题 I have a droppable div element that fades out when a draggable element is dragged off it. This works fine using the out event. The problem I'm getting is when there are two draggable elements on the droppable. The droppable element will still fade when I drag one off. How can I check if there is already another draggable element on the droppable so I can cancel the fade effect. I want the droppable element to fade only when the last draggable element is taken off. $(".droppable-element")

问题 I have implemented jQuery's draggable and droppable based on the example shopping cart demo. I would like to be able to remove the <li> from the droppable when you drag it out of the droppable. I thought this might have something to do with the droppable out event but the ui parameter is empty. Does anyone know the solution? 回答1: This is a complete working solution, not completly tested, you should still debug it maybe: {reassign draggable to dropped element to fired drop out event} {you

问题 I know the title is confusing, but the problem is easily reproduced. I have some elements on my page that are droppable (jQueryUI), and the hoverClass shows when they are being dragged over. However, I have some hidden elements that are sometimes shown during the drag, and then do not respond with their hoverClass as they should. I have a jsFiddle here that shows this happening, however, if you continue to drag the div around eventually the listItems start to show their hoverClass. However,

问题 Using jQuery UI's Droppable I have made a shelf type thing where the items contained on it can be moved. Here's the code: http://jsfiddle.net/JoeyMorani/7LWj4/ Is it possible to actually change the HTML of the shelf, so when the '.boxArt' divs are moved, they are also moved in the HTML. At the moment it seems to only change the position of the div and not actually move it. I want to do this so I can detect where the divs are. (What their parent div is) Thanks for the help! :) 回答1: I made some

问题 I am not able to solve the following problem: The below code works in all browsers of mac as well as windows, except that it works partially on macs safari(5.1.5) . Note: It works on windows safari(5.1.5). This is the basic structure : $(".div2" ).droppable({ accept: '.div1', tolerance: 'touch', drop: function(){ alert('dropped'); } }); So, basically when div1 touches div2 , drop event should be triggered. But the above case does not trigger the drop event. The only case (shown below) that

问题 Background I am attempting to drag-and-drop a <div> element inside an <input> using the jQuery UI Draggable and Droppable components. At the moment, I have to place the caret in the position I would like the text to appear in and then drag-and-drop the <div> in to the <input> . Question I'm not 100% sure if this is possible to do but what I want to do is to have the caret update its position automatically as I drag the <div> between the text of the <input> . jsFiddle example here... CSS

问题 I've created a code which allows me to drag and clone divs from column 1 to column 2. The column 2 is sortable. This works well, but I now want to drag a div from column 1 into a div which has already been dropped into column 2. Here's my code so far: HTML <div id="column1"> <p>Items</p> <div class="dragItem">Drag me ONE</div> <div class="dragItem">Drag me TWO</div> <div class="dragItem">Drag me THREE</div> </div> <div id="column2" class="droppable"> <p>Drop here</p> </div> jQuery: $('