asked on

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

Proculopsis

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

DCL3

ASKER

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.

DCL3

ASKER

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.

ASKER CERTIFIED SOLUTION

Proculopsis

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

DCL3

ASKER

Amazing!!! Thank you so much!! Merry Christmas!!!!!!!!!!!!!!!!!!!!!!!!!
Exactly what I needed!!!!!!!!!!!