CODEWITHSUNDEEP
jqueryeventsjquery-ui
marquito
marquito

Reputation: 895

Raise jquery draggable's "create" event

I've been trying to figure out how to use the 'create' event of the jquery.ui draggable control. And an example as simple as throwing an alert does not work: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Drag "create event" test</title>

<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>

<style type="text/css" media="all">
#pai { width:1000px; border:1px solid #ccc; position:relative; }
#filho { width:100px; border:1px solid #c00; position:relative; top:0; left:0; }
</style>

<script type="text/javascript">

$(document).ready(function(){                           

    $("#filho").draggable();

    $("#filho").bind("dragcreate", function(event, ui) {
        alert("VAAAAAAAAAAAI!");
    });
});
</script>

</head>

<body>
<div id="pai">
    <div id="filho">
        teste de drag
    </div>      
</div>
</body>
</html>

I've searched and tested but i can't seem to get even this simple example to work. as stated on jquery draggable's web page, the control does indeed have a "create" method which can be invoked either by associating it during initialization on binding it later. i've tried both methods unsuccessfully.

I'm using jquery v1.4.2 and UI v1.8.1.

Any help is appreciated.

Upvotes: 2

Views: 1874

Answers (3)

pmaruszczyk
pmaruszczyk

Reputation: 2165

In my opinion it should be:

$(document).ready(function(){                              

    $("#filho").bind("dragcreate", function(event, ui) {
        alert("VAAAAAAAAAAAI!");
    });
    $("#filho").draggable();
});

Firt bind event, then create draggable.

JQuery UI Version update

This will not work with JQueryUI version lower than 1.8.7. So you also need to upgrade your JQueryUI version to a newer one. As noted by Frédéric Hamidi in the answer comments.

Upvotes: 2

Gabriel
Gabriel

Reputation: 600

It seems to me that the only things that are missing are the correct references for the required JS. =)

Add:

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

Instead of:

<script src="js/jquery.js"></script>

<script src="js/jquery-ui.js"></script>

I took your code and switched the JS references. It worked!

I hope it helps you.

Upvotes: 0

Oliver
Oliver

Reputation: 9002

Why not just add your function in the draggable intitializer:

<script type="text/javascript">

$(document).ready(function(){                           

    $("#filho").draggable({
create: onCreate
});

function onCreate(event, ui){
alert("VAAAAAAAAAAAI!");
}


});
</script>

This should give the same result that you require

Upvotes: 0

Related Questions