Jquery question about draggable icons

I have the attached code and it is working perfectly, however, I need to be able to drag and have it clone more than once.  I need to know what setting I need to adjust to have it clone 10 times, so that when I drag it once, I can go back and drag the same icon from the row of icons 9 more separate times.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <meta http-equiv="content-style-type" content="text/css" />

    <title>Where have I been? - Demo</title>
    <meta name="description" content="Where have I been?" />

    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
	<script type="text/javascript">
	    google.load("jquery", "1");
	    google.load("jqueryui", "1");
	</script>

	<link rel="stylesheet" type="text/css" href="stylesheets/style.css" media="all" />

	<script type="text/javascript">
    $(document).ready(function(){
        //Counter
        counter = 0;
        //Make element draggable
        $(".drag").draggable({
            helper:'clone',
            containment: 'frame',

            //When first dragged
            stop:function(ev, ui) {
            	var pos=$(ui.helper).offset();
            	objName = "#clonediv"+counter
            	$(objName).css({"left":pos.left,"top":pos.top});
            	$(objName).removeClass("drag");


               	//When an existiung object is dragged
                $(objName).draggable({
                	containment: 'parent',
                    stop:function(ev, ui) {
                    	var pos=$(ui.helper).offset();
                    	console.log($(this).attr("id"));
						console.log(pos.left)
                        console.log(pos.top)
                    }
                });
            }
        });
        //Make element droppable
        $("#frame").droppable({
			drop: function(ev, ui) {
				if (ui.helper.attr('id').search(/drag[0-9]/) != -1){
					counter++;
					var element=$(ui.draggable).clone();
					element.addClass("tempclass");
					$(this).append(element);
					$(".tempclass").attr("id","clonediv"+counter);
					$("#clonediv"+counter).removeClass("tempclass");

					//Get the dynamically item id
					draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
					itemDragged = "dragged" + RegExp.$10
					console.log(itemDragged)

					$("#clonediv"+counter).addClass(itemDragged);
				}
        	}
        });
    });

	</script>



</head>

<body>

<div id="wrapper">
	<div id="options">
		<div id="drag1" class="drag"></div> <!-- end of drag1 -->
		<div id="drag2" class="drag"></div> <!-- end of drag2 -->
		<div id="drag3" class="drag"></div> <!-- end of drag3 -->
		<div id="drag4" class="drag"></div> <!-- end of drag4 -->

		<div id="drag5" class="drag"></div> <!-- end of drag5 -->
		<div id="drag6" class="drag"></div> <!-- end of drag6 -->
	</div><!-- end of options -->
	<div id="frame">
		<span id="title"><h2>What do you know?</h2></span>
		<table id="tbldevs" border="1">
			<thead>

				<tr>
					<th>
						<span id="names">John</span>
					</th>
					<th>
						<span id="names">Paul</span>
					</th>
					<th>

						<span id="names">George</span>
					</th>
					<th>
						<span id="names">Ringo</span>
					</th>
				</tr>
			</thead>
			<tbody>

				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>

					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>

				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>

					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>

			</tbody>
		</table>
	</div><!-- end of frame -->
</div><!-- end of wrapper -->
</body>
</html>

Open in new window

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.

ProculopsisCommented:

This example limits the number of times an item can be dragged:

<html>

<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q__26700771.html</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script> 
<script>

$(function() {

  var saint;

  $(".saint").each( function() {
    $(this).draggable( {
      helper: "clone",
      start: function() { saint = $(this) }
    });
  });

  $("#martyrdom").droppable( {
    drop: function() {
      $(this).html( saint.html() );
      var count = ( isNaN( saint.attr( "count" ) ) )? 1 : Number( saint.attr( "count" ) ) + 1;
      saint.attr( { count: count } )
      $("#count").text( count );

      if ( count > 2 ) {
        saint.draggable( "disable" );
      }
    }
  }); 

});

</script>

</head>
<body>

<table border="1">
<tr>
  <td class="saint"><img src="http://www.fotosearch.com/bthumb/ECC/ECC119/01060062.jpg" /></td>
  <td class="saint"><img src="http://www.fotosearch.com/bthumb/ECC/ECC119/01060060.jpg" /></td>
  <td>&raquo; drag &raquo;</td>
  <td id="martyrdom" style="width:100px;height:100%;text-align:center">Here</td>
</tr>
</table>

Count: <span id="count"></span>

</body>
</html>

Open in new window

DCL3Author Commented:
Ok, cool, we're almost there..

Any way to work this script you just gave me so that it can be incorporate into this? With a drop down showing the elements (icons) once selected and then keeping the selected icons on the page once you go to select another set of icons.

As I have it now..they disappear when the set is switched.
DCL3Author Commented:
here is what I am working with.....and referring to..
http://www.showmethesite.com/dhec/appendixe.htm

I need the script to work with a drop down menu and show the set of icons, let me drag them on an image and then remain when I choose again from the drop down menu.
ProculopsisCommented:

Here's another version:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script> 
<base href="http://www.showmethesite.com/dhec/" />
<title>DHEC</title>

<style type="text/css">
body { background-image: url( images/bg2.jpg ) }
table.icon-bar { border-width: 0px; border-spacing: 0px; border-style: none; border-color: transparent; border-collapse: collapse; background-color: white; }
table.icon-bar td { text-align: center; vertical-align: bottom; border-width: 1px; padding: 3px; border-style: solid; border-color: blue; background-color: beige; }
#drop-area { height:500px; width:800px; border: 3px dashed red; margin-left: auto; margin-right: auto; }
</style>

<script type="text/JavaScript">

var max = 3;
var iconRegister = [
  { maxInstance:max, src:"images/police.gif", label:"police", placeholder:"icon-police" },
  { maxInstance:max, src:"images/barracade.gif", label:"barracade", placeholder:"icon-barracade" },
  { maxInstance:max, src:"images/equip.gif", label:"equip", placeholder:"icon-equip" },
  { maxInstance:max, src:"images/label.gif", label:"label", placeholder:"icon-label" },
  { maxInstance:max, src:"images/loadingdock.gif", label:"loadingdock", placeholder:"icon-loadingdock" },
  { maxInstance:max, src:"images/medication.gif", label:"medication", placeholder:"icon-medication" },
  { maxInstance:max, src:"images/secguard1.gif", label:"secguard1", placeholder:"icon-secguard1" },
  { maxInstance:max, src:"images/towtruck.gif", label:"towtruck", placeholder:"icon-towtruck" },
  { maxInstance:max, src:"images/tf1.gif", label:"", placeholder:"icon-tf1" },
  { maxInstance:max, src:"images/tf2.gif", label:"", placeholder:"icon-tf2" },
  { maxInstance:max, src:"images/tf3.gif", label:"", placeholder:"icon-tf3" },
  { maxInstance:max, src:"images/tf5.gif", label:"", placeholder:"icon-tf5" },
  { maxInstance:max, src:"images/tf9.gif", label:"", placeholder:"icon-tf9" },
  { maxInstance:max, src:"images/tf10.gif", label:"", placeholder:"icon-tf10" },
  { maxInstance:max, src:"images/tf7.gif", label:"", placeholder:"icon-tf7" },
  { maxInstance:max, src:"images/tf8.gif", label:"", placeholder:"icon-tf8" },
  { maxInstance:max, src:"images/tf4.gif", label:"", placeholder:"icon-tf4" },
  { maxInstance:max, src:"images/tf6.gif", label:"", placeholder:"icon-tf6" },
  { maxInstance:max, src:"images/tf11.gif", label:"", placeholder:"icon-tf11" },
  { maxInstance:max, src:"images/tf12.gif", label:"", placeholder:"icon-tf12" }
];


$( function() {

  for ( entry in iconRegister ) {
    var placeholder = $("#"+iconRegister[entry].placeholder);
    var icon = $("<img/>")
    .attr( { src: iconRegister[entry].src, count: iconRegister[entry].maxInstance, "class": "draggable" } )
    placeholder.append( icon )
    .append( $("<br/>") )
    .append( iconRegister[entry].label );
  }

  $(".draggable").each( makeDraggable );
  $("#drop-area").droppable( { drop: processDrop } ); 

  var currentIcon;
  function makeDraggable() {
    var params = {
      helper: "clone",
      start: function() { currentIcon = $(this) }
    };
    $(this).draggable( params );
  }

  function processDrop( event, ui ) {
    if ( "undefined".indexOf(typeof(ui.helper.attr("count"))) == -1 ) {
      var clone = currentIcon.clone()
      .css( $.extend( { position: "absolute" }, ui.position ) )
      .removeAttr( "count" );
      clone.each( makeDraggable );
      $("#drop-area").append( clone );
      clone.draggable( "option", { helper: "original" } );

      var count = Number( currentIcon.attr( "count" ) ) - 1;
      currentIcon.attr( "count", count );
      if ( count == 0 ) {
        currentIcon.draggable( "disable" );
        currentIcon.css( { opacity: 0.4 } );
        currentIcon.parent().css( { "background-color": "silver" } );
      }
    }
  }

});
 
</script>
</head>
 
<body>

<table class="icon-bar">
<tr>
  <td id="icon-police" colspan="3"></td>
  <td id="icon-barracade" colspan="3"></td>
  <td id="icon-equip" colspan="3"></td>
  <td id="icon-label" colspan="3"></td>
</tr>
<tr>
  <td id="icon-loadingdock" colspan="3"></td>
  <td id="icon-medication" colspan="3"></td>
  <td id="icon-secguard1" colspan="3"></td>
  <td id="icon-towtruck" colspan="3"></td>
</tr>
<tr>
  <td id="icon-tf1"></td>
  <td id="icon-tf2"></td>
  <td id="icon-tf3"></td>
  <td id="icon-tf5"></td>
  <td id="icon-tf9"></td>
  <td id="icon-tf10"></td>
  <td id="icon-tf7"></td>
  <td id="icon-tf8"></td>
  <td id="icon-tf4"></td>
  <td id="icon-tf6"></td>
  <td id="icon-tf11"></td>
  <td id="icon-tf12"></td>
</tr>
</table> 

<div id="drop-area"></div>

</body>
</html>

Open in new window

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
DCL3Author Commented:
Amazing!!! Thank you so much!! Merry Christmas!!!!!!!!!!!!!!!!!!!!!!!!!
Exactly what I needed!!!!!!!!!!!
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.