JQuery :: Get Id(or Text) Of A Div That Is Dropped After Dragging?
Jan 26, 2011
I am working on implementing a dynamic drag-and-drop sortable jquery to php/mysql function in my app. I am following the tutorial here: [URL] I've got most of it figured out. The only problem is that it is not updating the mysql table correctly. It takes the orderID of the div that was dropped and sets it equal to the spot where it was dropped. As you can guess, that is a problem, because there is already an item with that orderID. So I need a way to grab the ID or even the text of the div that was dropped and pass it to that PHP script. And then I could reorder all the orderID's between the one grabbed and the spot where it was dropped.
Here is the existing Jquery code:
$(function() {
$("#eventBoxes").sortable({ opacity: 0.6, cursor: 'move', update: function() {
var order = $(this).sortable("serialize") + '&action=updateRecordsListings';
$.post("updateDB.php", order, function(theResponse){
I have 2 example/test pages of the issue I'm experiencing. For now, I'm just trying to get it to work in a standards-compliant browser, so view in something other than ie:
[URL]
If you click and drag the orange bar up or down, it works fine on the first page. However, on the 2nd page, if you click the orange bar and drag down too fast, it starts selecting text and then the bar gets all wacky.
My suspicion is that the bar gets messed up because the text is being selected. That occurs because if you scroll too fast, the cursor goes off the orange slider bar and starts selecting. If you scroll very slowly so that the cursor doesn't go off the bar it seems to scroll fine.
I've tried everything I can think of to stop the text from being selected, but I'm not 100% sure if that's the cause of the problem or just a symptom of something else (maybe bubbling or something?). I tried returning false on every mouse event on the lower panel, tried creating an absolutely-positioned mask above the text in the lower panel, tried removing all text from the lower panel, tried stopPropagation(), etc., but nothing seems to work.
If I set the mousedown/over/move on the lower panel to return false, it prevents selecting text normally by clicking the mouse & dragging, but it will STILL select the text if I click on the slider bar and drag down.
Script.aculo.us allows only one Draggable to to dropped in a Droppable at a time. Is there a library that allows multiple Draggables to be chosen and dropped?
I am building a simple t-shirt creator app for my shop and I am using the interface.js library: [URL].. docs/drag to drag/drop and re-size the graphic on the shirt background image.
Once the user has chosen a spot to put the graphic, how do I save the background image of the t-shirt with the image they dropped in the correct spot? Like, to merge the two graphics in place?
I am designing a site where users can submit a location. I want to use Google Maps with a draggable marker which posts the lat, lon when dropped on a position. I was wondering if anyone knows of a tutorial or could point me in the direction of anything similar.
How do I force the Web page to reload when someone just changes the value in the dropped down list? To be clear there are many items in this form, one of which is a dropped down list, but if they choose to certain rows of this drop down list then new fields/data needs to be presented to the user.And of course change the Web page to re-load new values based on what row in the dropped down list they changed to.
I'd like to make it possible to move the background of a site by clicking and dragging it with the mouse. So far I've only found flash solutions and I'd really rather not use flashIf anyone knows of any jquery code that is somewhat similar
I'm trying to drag a bunch of images in a Google maps-esque style. The javascript is pretty simple, but whenever I go and drag over a large image the image toolbar comes up in IE and the image looses focus. How do I get around this? Is there a way to disable that toolbar?
I am trying to let the user drag a rectangle over an image, which will then let the user zoom in on the dragged area. However, I am doing something wrong in implementing the onmousedown and onmouseup events.
Everything is very simple so far. I just defined an onMouseDown event to record the event's x and y locations as the starting point, and an onMouseUp event to record the x and y of the end point, and this function gives me the results of both in an alert box.
The problem is, that the OnMouseUp event does not get fired if I move the mouse while holding the left button down. This only works if I click down and then up at the same point, which is not what I want.
What could be wrong? Why does the browser not recognize the mouse up when the mouse is moved while holding the left button down? How do I fix this?
I have an SVG file and draggable div on one page. When I move div over this SVG file, it looks like div loses control and detaches from the mouse. If I do it slowly, div seems to barely follow the mouse which is being over SVG.
I tried assigning zIndex to SVG file to be the same as other elements on the page, but that did not help. Would anyone know why this happens?
I'm working on a script that involves dragging an element around a page. When it is dragged so that part is out of the window, the scrollbars are activated. Is there a way to turn off this behavior?
I want visitors to be able to drag large images (maps) using a mouse on various pages of my site instead of them using scroll bars. I am using Dreamweaver 8.
I'm using image as a resizing grip for my element and under IE and Opera it works fine but in Firefox it starts dragging the image when you press mouse button and move mouse and doesn't generate mousemove events. Is there a way to prevent the image from being dragged?
I've been tasked with the javascript and layout for an application that uses the browser engine (embedded browser I supposed it is). So it's not the actual browser, it looks like an application. Problem is, you know how you can drag and drop an image or html file into a browser and it will open it? Well, can this be prevented via javascript?
I was wondering if anyone could help me out with a script I'm trying to create/customize. The idea is to scroll an image by dragging of the mouse (like you have with Google maps for example), instead of the scrollbars. Right now I'm using a script that does the job perfectly fine under IE, but not so much under FireFox, and definitely not under Chrome. Some additional code is probably needed but I have no clue how to write proper JavaScript. Everything I try gives errors and leaves me baffled.
Here's a hands-on example of what I mean (works only under IE!): [url]
I need to be able to drag and drop data from one browser window to another. Presumably javascript would be the best way to handle this, but I'm not making much headway with the onDragDrop handler. Specifically, I'm really not sure how to transfer the data via the mouse drag & drop..
Just as the title says. i have been looking for days about how to find what the mouse is dragging to switch the ondragover event between true and preventDefault. i am on 5 forums and searching every second under different terms, does this mean i'm not socializing properly or does this answer just not exist! does anyone actually read these threads?
