droppable

问题 I have a container with different draggable -elements and there is a list of some "target" divs, where the user can drop the draggable elements. Example: Imagine, you have a list of "tags" (House,Computer,Car,..) and a list of some documents as target (all documents are part of the div <div id="doclist"> ). So the target is to assign the "tags" to the document using drag & drop. By the way, every tag-Div has an unique id ( <div id="e34a568b2"> ) Code for making the "tags" draggable: $('

问题 I'm using the Draggable/Droppable functionality of Jquery to allow drag-and-drop from a TreeView to a simple HTML table, but am finding that Droppable performance gets very sluggish as the number of cells increase in the table. I've looked around and the most-common solution people suggest is limiting the number of active draggables and droppables. Now, limiting the draggables was simple enough (use the mouseover of the treeview node to enable dragging). Then I tried to do the same thing for

问题 I have my screen divided into two DIV s. In the left DIV I have a few 50x50 pixel DIV s, in the right DIV I have an empty grid made of 80x80 LI s. The DIV s on the left are draggable, and once dropped on a LI , they should snap to center of that LI . Sounds simple, right? I just don't know how to get this done. I tried by manipulating the dropped DIV 's top and left CSS properties to match those of the LI they're dropped into, but the left and top properties are relative to the left DIV . How

问题 I am new to jQuery and I am working with the droppable API. I want to have a group of divs that can all hold one and only one droppable item. I've set the class of my droppable divs to inv. I can drop items into the divs but I can find a way to reject a drop once in the drop function. I want to be able to detect that my div already has a child and if it does revert the dopped element. my code currently looks like this $( "div.inv" ).droppable( { drop: function( event, ui ) { childCount = $

问题 So let me first explain what I am trying to emulate. From the home page, there is a main table with recent table entries. The user is given a set of "favorite" folders where they can drag and drop table rows from the main table. Rather than dragging the whole visible row (my rows are rather wide, and it is difficult to tell which folder it will drop into) I have the "information" icon, which in this case is an up arrow. The user can drag the icon and drop it into a folder, when at this point

问题 I can get the id of the item I have dropped on with the below code, but if i try to change the alert to get the id of the dragged item, nothing happens. e.g. alert(ui.draggable.attr('id') ); $(function() { function dropCallback(e) { alert("The firing droppable item was " + e.target.id ); }; $("#draggable").draggable({axis:"x"}); var dropOpts = { accept:"#draggable", drop:dropCallback, greedy:true }; $(".target").droppable(dropOpts); }); 回答1: Try using... drop:function(event,ui) {alert($(ui

问题 Jquery Drag and drop not working in Firefox and IE, but works fine in chrome and safari. This is my code: $(".drag").draggable({ helper: "clone", }); $(".drop").droppable({ drop: function (ev, ui) { if ($(ev.toElement).hasClass("drop") == true) { var widgetId = $(ui.draggable).attr("id"); $(ev.toElement).attr("id", "dash_" + widgetId); $(ev.toElement).html($(ui.draggable).html()); } } }); Code uploaded at http://www.skmcap63.hostoi.com/box-dashboard/ I need to drag the items from sidebar and

问题 I got draggable li - elements and droppable boxes - using jQuery UI. My structure: A list of 3 permission types <ul> <li data-action="create">Create</li> <li data-action="edit">Edit</li> <li data-action="delete">Delete</li> </ul> And 3 areas to drop: <div class="row"> <div class="col-md-3 col-sm-6"> <h3>Server</h3> <ul class="box" data-type="server"></ul> </div> <div class="col-md-3 col-sm-6"> <h3>Games</h3> <ul class="box" data-type="games"></ul> </div> <div class="col-md-3 col-sm-6"> <h3

问题 I'm trying create a trashcan where after you've put some items there, you could simply open it and drag any trashed item out of it by dropping it outside the trashcan. The way I've set this, is my web app has a trashcan icon where I drop the items and clicking the trashcan opens a box with the trashed items and fades in a black transparent background that obscures everything else so you just focus on the trashcan box. The code is essentially <div id="background"></div> <div id=

问题 Not sure if this can be done, some have said no, need to be able to drag from a sortable and drop on a dropable and have the drop actually occur. The jsfiddle is based on another example that implemented a trash can but I need the item to move to the new list. Note the drop only accepts items from sortable2. http://jsfiddle.net/LrVMw/4/ $("#sortable1, #sortable2").sortable({ connectWith: '.connectedSortable, #drop_zone' }).disableSelection(); $("#drop_zone").droppable({ accept: "#sortable2 li