jquery-ui-draggable

问题 I have problem after upgrading jquery and jquery ui with new version. I am getting data("draggable") undefined inside droppable. Fiddle shows my problem. $(this).data("draggable").originalPosition = { top: 0, left: 0 } It works with jQuery 1.8.3 and jQuery UI 1.9.2 . But not working when I use jQuery 2.0.2 and jQuery UI 1.10.3 . You can check using firebug at line number 39 which shows undefined when you are using latest jQuery files. Please help me or give any alternatives. Thanks in advance

问题 I'm using jQuery UI draggable component to add <span> to content editable <p> . The expected output was, paragraph <p> should be editable and the draggable component should able to drag and drop to paragraph and also the content of the <p> should able to be editable. I have problems with my code. When I type something inside <p> and click the outside <p> . typed words removing from the paragraph. My code as follows: $(function() { function textWrapper(str, sp, btn) { if (sp == undefined) { sp

问题 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: $('

问题 I need to use jQuery draggable in quite a complicated geometrical shape, and it is not possible to calculate the frame beforehand. So, containment option isn't cut for solving this problem. I've been thinking about drag function, checking my condition and returning false to prevent dragging. But, the problem is, that after returning false from drag function for the first time, dragging process stops, as if user have released the mouse button. Any suggestions on preventing dragging out of the

问题 I am using Jquery UI Draggable. I'm trying to avoid items from be dropped once that the div which will receive that items reach a limit. As you can see below, here is my code. $( "#grid-list" ).droppable({ over: function(event, ui) { count = 0; $("#grid-list").find("li").each(function () { count++; if(count > $("#grid-list").data("albumlist")){ alert("limit reached"); } }); } }); JS Fiddle example: http://jsfiddle.net/r1Lnxby9/ 回答1: Edit, Updated Try removing ondragstart="drag(event)" ,

问题 I have two connected sortables, dragging between these works fine. I needed to drag more than one at a time, so I got that working using the following like, appending selected items to event.item. $(this).sortable({ connectWith: ".stage-content", placeholder: 'placeholder', start: function(ui, e) { e.item.siblings(".selected").appendTo(e.item); .... The problem I can't figure out, when not hovering over one of the two drop zones, the placeholder ends up within the elements I am dragging. If

问题 I'm attempting to have the dragged element detect where it's hovering over on the stop event for the jQuery's UI draggable function. Here is my attempt, however to no avail: $(".artwork").draggable({ stop: function(e, ui){ ui.mouseover(function(f){ if(f.target.id == "wall") { alert("yes!"); } }); } }); I'm not too sure I fully understand how I'd be able to detect what element I'm hovering over on the drag's stop event. Thanks! 回答1: You might want to check droppable 's over event. $("

问题 I want some images to drop in a targeted area as many times as possible. But the image drops for only one time. My jQuery UI code: $(function() { $( ".draggable img").draggable({ revert: "invalid", appendTo: "#droppable", helper: "clone" }); $( "#droppable" ).droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", drop: function( event, ui ) { $( this ).find( ".placeholder" ).remove(); var image = $(".ui-draggable"); $( "<img />" ).image.src.appendTo( this ); } }); });

问题 The idea is pretty simple and it almost works. There are two tables and the user has the option of dragging rows between the two tables. When a row is dragged from table1 to table2, ajax is used in order to update the database with the data that is removed from table1, added to table2, and to re-display both of the tables with the new data. The same thing works if information is dragged from table2 to table1. You can see a sample of the code here. Here is an excerpt of the Javascript code for