Link to home
Create AccountLog in
Avatar of DCL3
DCL3Flag for United States of America

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

Avatar of Proculopsis
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

Avatar of 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.
Avatar of 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
Avatar of Proculopsis
Proculopsis

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of DCL3

ASKER

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