Search jQuery

jQuery Forum

Using jQuery UI

duffdaddy

How to: Counting dropped elements

in Using jQuery UI • 1 year ago

I've got this so far, but it's not working...see below.

You can see my working example here:

Just drag the doctors back up over the forearm and drop it.

---------

$( init );

function init() {
$('#femur_target').draggable({ snap: true });

$( init );

function init() {
$('#femur_target').draggable({ revert: "invalid" });

$( int );

function int() {
$('#femur_target').draggable({ snap: '#femur_slot', snapMode: "inner" });

$( init );

function init() {
$('#hand_target').draggable({ snap: true });

$( init );

function init() {
$('#hand_target').draggable({ revert: "invalid" });

$( int );

function int() {
$('#hand_target').draggable({ snap: '#hand_slot', snapMode: "inner" });

$( init );

function init() {
$('#fibula_target').draggable({ snap: true });

$( init );

function init() {
$('#fibula_target').draggable({ revert: "invalid" });

$( int );

function int() {
$('#fibula_target').draggable({ snap: '#fibula_slot', snapMode: "inner" });

$( init );

function init() {
$('#tibia_target').draggable({ snap: true });

$( init );

function init() {
$('#tibia_target').draggable({ revert: "invalid" });

$( int );

function int() {
$('#tibia_target').draggable({ snap: '#tibia_slot', snapMode: "inner" });

$( int );

function int() {
var count = 0;
var $thisCount = $( "#counter" );
$('#femur_slot').droppable({
accept: "#femur_target",
drop: function( event, ui ) {
$( "#femur_target" )
.children(".bone")
.css("transform", "rotate(20deg)").css("-webkit-transform", "rotate(60deg)").css("-ms-transform", "rotate(20deg)").css("-o-transform", "rotate(20deg)").css("-moz-transform", "rotate(20deg)");
count++;
$thisCount.find('div').text('Correct: '+ count);
$("#femur_slot").stop
}
});

$( int );

function int() {
var $thisCount = $( "#counter" );
$('#tibia_slot').droppable({
accept: "#tibia_target",
drop: function( event, ui ) {
$( "#tibia_target" )
.children(".bone")
.css("transform", "rotate(10deg)").css("-webkit-transform", "rotate(-20deg)").css("-ms-transform", "rotate(10deg)").css("-o-transform", "rotate(10deg)").css("-moz-transform", "rotate(10deg)");
count++;
$thisCount.find('div').text('Correct: '+ count);
$("#tibia_slot").stop
}
});

$( int );

function int() {
var $thisCount = $( "#counter" );
$('#fibula_slot').droppable({
accept: "#fibula_target",
drop: function( event, ui ) {
$( "#fibula_target" )
.children(".bone")
.css("transform", "rotate(10deg)").css("-webkit-transform", "rotate(-21deg)").css("-ms-transform", "rotate(10deg)").css("-o-transform", "rotate(10deg)").css("-moz-transform", "rotate(10deg)");
count++;
$thisCount.find('div').text('Correct: '+ count);
$("#fibula_slot").stop
}
});

$( int );

function int() {
var $thisCount = $( "#counter" );
$('#hand_slot').droppable({
accept: "#hand_target",
drop: function( event, ui ) {
$( "#hand_target" )
.children(".bone")
.css("transform", "rotate(-18deg)").css("-webkit-transform", "rotate(-42deg)").css("-ms-transform", "rotate(-18deg)").css("-o-transform", "rotate(-18deg)").css("-moz-transform", "rotate(-18deg)");
count++;
$thisCount.find('div').text('Correct: '+ count);
$("#hand_slot").stop
}
});

}}}}}}}}}}}}}}}}
------------------------