Click here to Skip to main content
15,891,919 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I want to use drag and drop javascript function but want to put condition in this javascript.

I will count a area or column from mysql database.
And javascipt drag and drop function will run this count times

for ex: from database count=3 javascript drag and drop run 3 times not run greater than 3.not dropped or not draggin

how can I do?
İs there any javascript code?(conditional drag and drop)

thanks a lot.
Posted

1 solution

The Logic is will be as follows

1. Store the number of iteration fetched from mysql in a javascript variable.
2. Declare a javascript counter which will be incremented for each set of drag and drop.
3. Compare the number of interation from mysql with the drag and drop counter variable after the completion of each drop event and if both values got matched then unbind the particular drag and drop event from the control. Something like this

if(iteration_variable == counter_variable){
//... Code to unbind the drag-drop event
}

I hope this might work. If you can post the code snippets of the partcular javascript function then I can help you apply the same logic in your code.

Please let me know if the above logic is useful for you.

Happy Programming.
:)
 
Share this answer
 
Comments
Member-2338430 22-Jan-13 4:34am    
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
</script>
</head>
<body>

<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>

<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>


</body>
</html>

for ex here http://jqueryui.com/droppable/
Member-2338430 22-Jan-13 4:38am    
there are js libraries
http://code.jquery.com/ui/1.10.0/jquery-ui.js
Avishek Pat 22-Jan-13 4:49am    
<script>
$(function() {
var drop-cnt = 0;
var iteration-cnt = @Model.DataIteration;//Replace the @Model.DataIteration with your logic to get the mysql fetched value

$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {

if(drop-cnt <= iteration-cnt){
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
}
else{
//unbinding the events
$('#draggable').unbind('draggable');
$('#droppable').unbind('droppable');
}
});
});

This might work for you. Please let me know what are the outcomes for this.
Member-2338430 22-Jan-13 4:57am    
thank you for this I will try
Avishek Pat 22-Jan-13 5:00am    
If you found this answer as useful then please mark is as correct.

:)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900