I'm using the Scriptaculous library to slap an appealing UI on an application which helps an enduser build lists. Let's say its for pizza creation. To fill out an order, you drag a size of pizza from the pizza palette into the orders droppable. Once it is put in there, it gets replaced with a new div which is both draggable (because y...
At the moment I have a set of divs, generated dynamically by php and all having their ids starting with 'itembox', with a count number appended. I have a droppable garbage bin area on the page so that the user can delete an individual itembox by fdragging and dropping on to the bin. My problem is that the droppable won't seem to activat...
This code works in Firefox, Internet Explorer, not in Safari/Chrome: <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> <script> function newDiv() { var div = $('<div id="divNew" style="width: 50px; height: 50px; border: solid 1px; b...
Hi all, I'm a bit new to jQuery and hope somebody can help me out. I'm trying to change an element (li) to another element (div) after the (li) has been dropped. Sample code: $("#inputEl>li").draggable({ revert: true, opacity: 0.4, helper: "clone" }); $("#dropEl") .droppable({ accept: ".drag", hoverClass: "dropElhover", d...
When i try to execute the following code am getting the error in IE like. Object doesn't support this property or method <script type="text/javascript"> google.load("jquery", 1); google.load("jqueryui", "1.5.3"); $(document).ready(function() { $("#main-dialog").draggable(); }); </scrip...
When I drag a link that is inside a draggable div over an iframe in IE7, I get very strange results. Try the code below and let me know if you have any suggestions about how to fix this. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <!--<sc...
Hi all, I have a draggable div that represents a little info popup that the user can drag around the screen. But this div is anchored to a point on the screen, and I would like there to be a caret drawn between the div and the point that it is anchored to. An example of this can be found on Google maps, when you hover over a store or ...
Have two connected sortable lists inside a div. Need to be able to reorder items in each list, and also drag items from top list to bottom list within the same 'portlet' div (but not drag them to another div. This is working (sort of) but seems to be randomly resorting lists on drop - back to the original order (depending on browser, thi...
jQuery UI Sortable + Draggable 1.6rc5 WHAT I AM DOING: Creating a calendar with varying date ranges (ex: could be 1 week displayed, could be 20 weeks displayed). This calendar has events in each day, and the events are sortable within the day itself, as well as between all other days on the visible calendar. My average calendar date r...
Hello, I'm having trouble with the droppable effect in jquery 1.3.1 (UI version 1.5.3). As far as I can tell, everything works perfectly except the drop() function doesn't get called. I can tell the droppable target is accepting the element being dragged (via the thumbnail class), but the draggable item won't drop. Thanks for your help ...
I'm using draggable(), but occasionally the draggable() seems to create a locking effect where the dragging effect persists even after the mouse button is released. Once this happens, the only fix is to refresh the page, which is a terrible way to go for an ajax-based site. So using the UI docs I'm trying to figure out a way to set a ti...
Thanks for the three excellent answers which all identified my problem of using "onclick = ..." instead of "observe( "click",..." But the award for Accepted Answer has to go to Paolo Bergantino for the mechanism of adding a class name to mark the dragged element, which saved me some more work! In my HTML I have a table with an image ...
hey all, i've created a very iphone-y slider element that is both restricted in overall movement horizontally (0-400px and it does not move vertically) and "snaps" to either side of the 400px "container" when it has passed the 200px mark and the drag has ended. It works perfect in firefox. In Safari, the onEnd function that positions th...
On the iPhone, if you touch and hold your finger on an icon, it starts vibrating, then you can drag them around while the other icons move aside and rearrange dynamically. I'm trying to figure out how to do this inside an application with a grid of images or buttons. I don't need them to vibrate, but I do want the UI to allow the user ...
i want to be able to create a copy of the element that i want to drag. im using the standard ui draggable and droppable. i know about the helper clone option. but that does not create a copy. the dragged item gets reverted back to the original position. ...
I have an application whose interface is based around a typical OS user interface with draggable tabs. I want to make the tabs act like windows in an OS in the way that the last clicked tab/window appears 'on top' of any other windows. I know this has to do with the z-index of the elements. Here is a simplified version of the code: ...
Hi, I am using the JQuery libs to implement drag and drop. How do I get at the element that is being dragged when it is dropped into sortable list? I want to get the id of the div being dragged. The following element is dragged: <div class="control" id="control[1]" > <img src="img/controls/textfield.png" /> </div> I have the stand...
Hi all, The code below enables a control (a label for instance) to show drag images while the dragging operation. My problem is that I do not want to show the drag image instanly when the dragging begins, I want the image to be displayed when the mouse is on specific boundaries of the control - eg. in the right half of the label . S...
I have a pool of items in the drag list which is connected to a sortable using connectToSortable option. Now I want to remove some items from this sort list and move them back to the drag list. Sort of like an undo. Suppose the user moves some 5 items to sort list and decides he/she wants only 4 items, and decides to just drag the unwant...
I've successfully implemented the jQuery sortable() plugin but want to enhance it with a sort indicator. This would be a vertical bar in between the items where the draggable can be dropped. See the image below for an example. Can this easily be achieved with the sortable() plugin? ...