stacking icons that you can drag and drop

Hey, any way to "stack" the icons so they could all be on the page.  For example, 10 icons of the same type on top of each other?  I have 10 sets of icons that I need to have each one stacked on top of each like icon.  (10 icons of a car stacked on top of each other...so that when you take one off to drag somewhere on your web site, you have 9 more underneath).
DCL3Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

te-eduCommented:
Yes you can using Javascript, PHP and Mysql. I make that with Prototype, Scriptaculous draggable and database. I can provide you solution.
Check tecms.te-edu.com/admin login with bogyvet pass 654321 and go to category page on left you will see list of categories in this case when you click on red delete button you delete category, or if you add category it will be shown in category list on left.

Approach is same just add drop container that will lets say send dropped  item to shoping basket and selected item will disapear from icons.

DCL3Author Commented:
k, here's the page I am dealing with..
http://www.showmethesite.com/dhec//isd.appendixc.htm

I need for someone to browse an image and then be able to choose icons from teh drop down menu, drag them on to the image they just added by browsing and then add another set of icons by the drop down menu.  

However the way I have it now, the icons disappear of the main image when I switch to another icon set from the drop.  Make sense?  Keep in mind this has to be stand alone, self-contained code it cannot link to any servers.
te-eduCommented:
FIRST SOLUTION is simple problem is when you change icon set you hide that icon

this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"

just add this piece of code:
this.targetobj.style.display= 'block';

or SECOND SOLUTION add class in css
.classshow{
display : block;
}
and add in js
this.targetobj.style.className = 'classshow';

I didn't look deeper in code if this is not working you must hide icons in holder separate. And that need a lot of work because complete HTML

first
.classshow{
display : block;
}
and add in js after
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"

this.targetobj.style.className = 'classshow';


<div class="visibleDiv" id="two"></div>
here we must remove tables and use float divs with unique id
<div class="visibleDiv" id="two">
<div id='icon_1' class='show_icon icon_set_1'><img src='' /><div>
...................
</div>
and THIS JS FUNCTION MUST BE CHANGED:

function showDiv(divName) {
      // hide last div
      if (lastDiv) {
            document.getElementById(lastDiv).className = "hiddenDiv";
      }
      //if value of the box is not nothing and an object with that name exists, then change the class
      if (divName && document.getElementById(divName)) {
            document.getElementById(divName).className = "visibleDiv";
            lastDiv = divName;
      }
}

to something like this
function showDiv(divName) {
      if (lastDiv) {
..this is prototype function and can be done with native js
..collect all elements that are parents of lastDiv->variable that holds last div class name, that have class name drag
var elements = $$('.lastDiv').hasClassName('drag');

elements.each(function(element){
$(element).className = 'class_hide';
..we collect all elements
}
      as when we moveicon we change class name to = classshow      will stay showned

}
This is basic instructions how to not final code.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

DCL3Author Commented:
ok, after making those changes.  It is still not keep ing the icons when I drag it in teh screen and then switch to another.  See what I mean?  http://www.showmethesite.com/dhec//isd.appendixc.htm
te-eduCommented:
Still hiding complete div with icons. So must be done to hide each icon not icon holder. I will try tonight to fix this and I will send you code. If that is ok to you.....
te-eduCommented:
But there are few things more if I solve icon problem you still have few more problems to solve.

- you must save image on server with icons you choose, because if you print image  icons are missing because you are printing whole page. You can do that with php and adding watermark eg. icons on specific coordinates.

That involve lot more Javascript - before printing you must find icons positions with Javascript and send data to php to create new image with icons. After that you can use print or download that image. There are also problem to solve with headers to print just image noting else.

There are a lot more work to get what you want.

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.