jQuery UI draggable problem
Posted: Thu Mar 14, 2013 6:32 pm
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>