jquery-ui-draggable

I've got a draggable thing outside an iframe, and a droppable target inside it. Here I've shown the iframe as containing a snippet of the HTML that is loaded by its src attribute. <div id="draggables"> <img src="drag-me.gif"> </div> <iframe src="iframe-src.html" id="iframe"> <!-- HTML gubbins --> <div id="droppable"> </div> <!-- More HTML gubbins --> </iframe> I use some jQuery (UI draggable/droppable) to do stuff: $("#iframe").load(function() { var $this = $(this); var contents = $this.contents(); contents.find('#droppable').droppable({ drop: function (event, ui) { alert('dropped'); } }); $('

I have my primary grid dragging/dropping rows correctly into a secondary grid. My question is, how do I perform a check just before the row is dropped into my secondary grid, which determines if the row I am attempting to drop is already there? If it is already there in the secondary grid, don't let the user drop it there, basically stop the drag/drop function. I'm thinking I can grab the key value from the row I am attempting to drop. Then, check to see if that value already exists as the key value in one of the rows I already dropped. I'm assuming I will have to use this function in some way

I'm trying the jQuery Context Menu with jQuery Draggable rows in a jQGrid . The problem I'm having is that since I added the jQuery Context Menu the draggable action is triggered on single click (as well as the normal drag). It looks a little weird when I rightclick a row to get the menu, and then click outside it on another row (to discard the menu) and that row starts following the cursor. Does it have to do with the evt.stopPropagation(); in the following snippet from jQuery Context Menu? $(this).mousedown( function(e) { var evt = e; evt.stopPropagation(); $(this).mouseup( function(e) { e

This is my code: http://jsfiddle.net/652nk/ HTML <div id="canvas"> <div id="dragme"></div> </div> CSS #canvas { width:500px; height:250px; border:1px solid #444; zoom:0.7; } #dragme { width:100px; height:50px; background:#f30; } JS $(function(){ $('#dragme').draggable({containment:'parent'}) }) I have a major issue when using css zoom property. Position of target draggable div is not coordinated with cursor position. Is there any clean and simple solution? I should be able to change zoom dynamically. tuze You don't need to set zoom property. I just added the difference to draggable's position

Using jQuery UI, I am trying to create an interface with two scrollable containers, each containing many draggable elements. The user can drag an element from one container to the other. The dropping feature is not an issue . When dropped, the element is detached and recreated in the right place under its new parent. My problem is that the draggable element cannot be displayed outside its container when the container has position:relative; applied , so while dragging, the element will disappear when it is moved outside the container boundaries. This default behaviour makes sense, as normally

Here is what it looks like; $( "#box ul li" ).draggable({ helper: "clone" }); $( ".item" ).draggable({containment: ".door"}); $( ".door" ).droppable({ accept: ":not(.ui-sortable-helper, .item)", drop: function( event, ui ) { $( "<div class='item'></div>" ).html(ui.draggable.find("img")).appendTo(this); } }); User drags the $( "#box ul li" ) element and drops it on $(".door") element. And it appends it to $(".door") element with $(".item") selector. I am using jquery UI - Draggable to drag and drop items. There is no problem there. Here is the actual question; But when you start dragging the

I have a jQuery UI draggable, and I've tried to create a custom helper which would contain some but not all information of the original element. Here's my draggable elements; <ul> <li><div>Name</div> <span>12-12-2011</span></li> <li><div>Another name</div> <span>12-12-2011</span></li> </ul> And jQuery; $("ul li").draggable(function(){ helper: function(){ return $("<div></div>"); } }); The idea would be that while dragging, the user would have a helper that contains only the name, but not the time element. My actual code is slightly more complex than this even, so what I'm really looking for is

I am using the jQuery UI Draggable/Sortable demo (http://jqueryui.com/demos/draggable/#sortable) for the basis of my project. I need to get a reference to the <li> that gets cloned into the sortable when the sortable receives it. I tried the sortable's receive event, but that only gives a reference to the original draggable <li> , and not its clone. In the demo you reference, there's actually a bug; after you drag an item down it inserts a cloned li with an id which is a duplicate of its brother's into the DOM, so beware (a bug was filed about this but there's no activity around it). I did a