jQuery UI draggable problem

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
drayarms
Forum Contributor
Posts: 134
Joined: Fri Dec 31, 2010 5:11 pm

jQuery UI draggable problem

Post 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>
User avatar
mecha_godzilla
Forum Contributor
Posts: 375
Joined: Wed Apr 14, 2010 4:45 pm
Location: UK

Re: jQuery UI draggable problem

Post 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
Last edited by mecha_godzilla on Fri Mar 15, 2013 5:34 pm, edited 1 time in total.
User avatar
mecha_godzilla
Forum Contributor
Posts: 375
Joined: Wed Apr 14, 2010 4:45 pm
Location: UK

Re: jQuery UI draggable problem

Post 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
Post Reply