?
Solved

JQuery Drag and Drop questions

Posted on 2011-09-21
1
Medium Priority
?
547 Views
Last Modified: 2012-06-21
I have done a fair amount of work with HTML forms, but never using Drag and Drop with JQuery.  I got roped into this for a non-profit that I do some volunteer for from time to time.  They want to change their form based system for ordering supplies to one where you can drag them.  They thought that looked cooler than the cart page they have now.

It is a fairly simple drag and drop.  I borrowed the code from an example, and made some modifications from there.   Eventually, if I can get this to work, then I will dynamically get things from the database, format, etc.  I figure that if somebody that knows what they are doing (as opposed to me) I could see how it should be done and learn something.

However, I have reached the limit of my JQuery expertise, at least for now until I work with it more.

My big issues now are these:

I need to put the little X thingy inside the table, that is the delete button.  I see where this is done by adding this to the HTML, but it puts it in front.  Is it possible to put this where the X is in my table?  I am sure it is, just not sure the best way.

I can get the attribute, like the model number, but how could I get the other form attributes, like quantity, hidden form elements, etc. for the dragged items?  I know I can post the form and get them, but is there a way to get them without posting? I have these in the HTML, and if I post the form, I can get them, but would like to do some checking prior to posting, but just for the dragged items.  Would I just put the form tags around the div for the dragged items?

I need to figure out which item is being dropped so I can adjust the item list.  I want to keep a count of the items dragged, and adjust them, and also a list of what has been dropped so that you can’t drag the same item twice.  The drop per item using the X thingy works, but if I wanted to do something else with the remove I need to know what item has been dropped.

Can the item dragged be removed from the left list when it is dropped to the right?  That would cure the issue with keeping track of what is dropped and preventing a second drop of the same item.

I have attached the files, html, javaScript, Css and images that make it work.

Sorry if this is pretty basic, but I just started working with JQuery a couple days ago, and DnD yesterday.

Thanks,
Bob


 
DnD.css
DnD.js
DnD-Test.html
jquery-1.5.min.js
jquery-ui-1.8.9.custom.min.js
1.jpg
2.jpg
3.jpg
5.jpg
4.jpg
6.jpg
0
Comment
Question by:Bob_pyle
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 3

Accepted Solution

by:
mykde earned 2000 total points
ID: 36578546
Can the item dragged be removed from the left list when it is dropped to the right?  That would cure the issue with keeping track of what is dropped and preventing a second drop of the same item.

Yes

Add this line to your DnD.js:
$("#"+itemid).hide();

Open in new window


like so:
var item = ui.draggable.html();
            var itemid = ui.draggable.attr("id");
            var html = '<div class="item ivote">';
            html = html + '<div class="divrm">';
            html = html + '<a onclick="remove(this)" class="remove ' + itemid + '">&times;</a>';
            html = html + '<div/>' + item + '</div>';
            $("#votes").append(html);
            $("#"+itemid).hide();
            //alert("Dropped item - " + item);
            //alert("Dropped html - " + html);
            // update total votes
            total_items++;
            $("#citem").html(total_items);
            //alert("After Items - " + total_items);
            // expand ballot box items
            if (total_items > 4) {
                $("#votes").animate({ width: "+=120" }, 'slow');
            }

Open in new window

0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today I am discussing AJAX problems in IE7 and I bet this will helps many guys out here who have problems with AJAX work. Lets start with the discovery of problem and then we will talk about its different solutions. My last two projects included …
The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…
We’ve all felt that sense of false security before—locking down external access to a database or component and feeling like we’ve done all we need to do to secure company data. But that feeling is fleeting. Attacks these days can happen in many w…

719 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question