droppable

问题 I've got a scenario where I have multiple droppable containers, that are also sortable . I need to be able to drag clone s from my source draggable , and drop them on any of the droppables . Within each droppable , the items need to be sortable . I also need to be able to drag a draggable from one droppable to another. Here is a JSFiddle I've started as a proof of concept that I can't quite get working. There are two issues I can see: If you drag two items onto the first (left-most) droppable

问题 I have a small jquery draggable/droppable app I am building. You can see it here: http://jsfiddle.net/franco13/AwnJA/1/ I need to do the following and I am new to dragging and dropping in jquery, so thank you for assisting. I wish to: prevent the blue box from being dragged to box 2, until it has been dropped in box 1 once the blue box is dropped into box 1, I want to make it draggable again so it can be dropped into box 2 while leaving a clone behind like this: $( init ); function init() { $

问题 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:

问题 JS Bin demo Task: I'm creating an event scheduler using jQuery UI. Events are of a certain length (in minutes) and they can be dragged into different days, each with their own maximum length (in minutes). In the example, each day's maximum length is 480 minutes, and no more than 480 minutes worth of "events" should be allowed to drop in. Problem: If the "event" will cause the "day" to exceed its maximum time length (based on the combined times of elements already dropped on it), that "day"

问题 I'm trying to make a drag and drop uploader in HTML5 with the added requirement of being able to do so with files dragged from other websites I don't own and can't edit (mostly images). In this case, on the ondrop event, instead of downloading the image from the local computer using e.dataTransfer.files and posting it, I retrieve the URL with e.dataTransfer.getData('URL') and post it to the server for it to download server-side. Works fines, except when I drag an image enclosed in a link. It

问题 I have searched a lot of.But I can't find answer.Maybe dublicate.Here is a bit of my code: $(".box").draggable({ revert:"invalid", stop:function(ev,ui){ //if(dropped) alert(ui.item.attr("id"); //else alert("Not dropped"); } }); $(".box").droppable({ accept:function(drag){ return $(drag).attr("data-id")===$(this).attr("data-id"); }, drop:function(ev,ui){ } }); I have looked droppable options and draggable options.But it isn't helpfull.In other word how to access dropped element using draggable

问题 I have this markup <ul id="hello" class="cat"> <ul id="a1" class="cat"> </ul> <ul id="a2" class="cat"> </ul> </ul> I did this thing $("ul.cat").droppable( { drop:function() { alert($(this).attr("id")); } }); It always write "hello". only "hello". How can I bind droppable on childs too? UPD: I want drop in elements in #hello's chidlren AND #hello itself. I want to determine where li was dropped. 回答1: I've found the solution: #hello needs greedy:true http://jqueryui.com/demos/droppable/

问题 This is a part of my code. If I try to drop an image on the block preventDefault does not work. jQuery(document).ready(function($) { $.event.props.push('dataTransfer'); $('#imgDropzone').on({ dragenter: function(e) { $(this).css('background-color', '#ffd1ff'); }, dragleave: function(e) { $(this).css('background-color', ''); }, drop: function(e) { e.stopPropagation(); e.preventDefault(); var file = e.dataTransfer.files[0]; var fileReader = new FileReader(); var el = $(this); fileReader.onload

问题 I have my draggable and droppable setup correctly using jquery-ui. They are both the same size, so the draggable should fit nicely on to the droppable. Is there any way to make the draggable snap in to the middle of the droppable so as to completely cover it? It seems if I use the snap: parameter it just snaps to the edges, and not necessarily to the middle of the droppable. 回答1: Would this not do the job, give or take a pixel: drop: function(event, ui) { $(ui.draggable).offset($(this).offset

问题 In a nutshell, if you use draggable with a grid and set revert: 'invalid' on draggable items they don't return to exactly the same place you started dragging them from. They return to a place close to where you started dragging them...pretty weird. This could well be a bug in UI. If so, does anyone know if there's a workaround for it? Example: http://jsfiddle.net/n2AUv/11/ Thanks! John. 回答1: grid option documentation says: Snaps the dragging helper to a grid, every x and y pixels. So it looks