Page 1 of 1

jQuery UI draggable problem

Posted: Thu Mar 14, 2013 6:32 pm
by drayarms
I can't seem to understand where I went wrong. Refer to this url to see the problem I'm describing (www.http://playcheckonline.com/test_draggable.html) I have this very simple script which is supposed to enable the card get dragged from the orange box (id box 2) into the green one (id box 1). Here's the entire script. I have links to the latest jquery and the jquery ui versions embedded at the beggining as you can see. Well, the script just won't work and there is no error message. Who can figure out the problem?

Code: Select all

<!DOCTYPE html> 

<html> 

	<head>

		<script type = "text/javascript" src="http://code.jquery.com/jquery-latest.js"> </script>




		<link type="text/css" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" rel="Stylesheet" />

	
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>



		<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>


		
		<script type="text/javascript">


			function play(){


				$('#box2').find('.card').draggable({

					helper: 'clone',

    					cursor: 'pointer',

      					revert: true,


				});


				$('#box1').droppable({

     					accept: '#box2 .card', 


				});


			}//End player go board function


			play();//Parse the function


		</script>

		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 

	</head>

        <body>

		<div id = "box1" style = "height:200px;width:600px;background:green"> 

		</div>


		<div id = "box2" style = "height:200px;width:600px;background:orange">  

			<div> <img class = "card" src = "images/new_deck/11h.png"/> </div> 

		</div>
	</body>

</html>

Re: jQuery UI draggable problem

Posted: Fri Mar 15, 2013 5:22 pm
by mecha_godzilla
Hi,

It might be best to start with a working example:

http://jqueryui.com/draggable/

The following code works for me, although it doesn't have quite the level of functionality you need just yet:

Code: Select all

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#card" ).draggable();
});
</script>
</head>
<body>
<div id="box1" style ="height:200px;width:600px;background:green">
</div>
<div id="box2" style ="height:200px;width:600px;background:orange"> 
<div id="card"><img class="card" src="11h.png" /></div>
</div>
</body>
</html>
Presumably you'd want to restrict each card's movements to the green/orange boxes, and you'd also need a way of applying the action to a number of cards without declaring them all in the script. The find() method as you're currently using it doesn't appear to work though.

HTH,

Mecha Godzilla

Re: jQuery UI draggable problem

Posted: Fri Mar 15, 2013 5:27 pm
by mecha_godzilla
EDIT: In the interests of not reinventing the wheel, there's a very good example of what you want to do here:

http://www.elated.com/res/File/articles ... -game.html

M_G