Only fetch output when element is not being dragged - php

Question

How could I change the code below so that when an element is being being dragged the script will stop fetching the output file until that element was released?
$(document).ready(function() {
//$(".draggable").draggable();
$(".draggable").draggable({ containment: '#container', scroll: false });
$(".draggable").draggable({ stack: { group: '#container', min: 1 } });
$("*", document.body).click(function (e) {
var offset = $(this).offset();// get the offsets of the selected div
e.stopPropagation();
var theId = $(this).attr('id');// get the id of the selceted div
$("#result").text(this.tagName + " id=" + theId + " (" + offset.left + "," + offset.top +")");
//post x,y to php (and the id of the elemnt)
$.post("http://localhost/index.php", "id=" + theId + "&x=" + offset.left + "&y=" + offset.top);
});
var req = function () {
$.ajax({
url: "out.php",
cache: false,
success: function(html){
$("#stuff").empty().append(html);
var css_attr = html.split(",");
$('#1').css('left', css_attr[0] + 'px').css('top', css_attr[1] + 'px');
},
complete: function(){
req();
}
});
};
req();
});
Note: This script is dependent on the following JavaScript sources:
jquery.js
http://jqueryui.com/latest/ui/ui.core.js
http://jqueryui.com/latest/ui/ui.draggable.js
http://jqueryui.com/latest/ui/ui.droppable.js
Anything Helps...Thanks.

Answer 1

Draggables has options to allow you to associate functions with the start and stop of the drag. (see http://api.jquery.com/, click jQuery UI at the top for docs). So you can use that and perhaps have a global boolean that gets set when the drag starts and unset when the drag ends. Have your req() function check this boolean and exit if it's set. Something like:
var halt_request = 0;
$(".draggable").draggable({
containment: '#container',
scroll: false,
start: function(){ halt_request = 1; },
stop: function(){ halt_request = 0; }
});
...
var req = function () {
if (halt_request) {
sleep(10); // so you're not looping too quickly
req();
return;
}
$.ajax({
url: "out.php",
...
And better yet, instead of having req() call itself, have it use setTimeout. Have the timeout as a global and have the start/stop functions clear/set the timeout.

Answer 2

You can even take kbosak's idea a bit further:
var req = function () {
...
$(".draggable").draggable({
containment: '#container',
scroll: false,
stop: req
});
In other words, create a draggable that calls the function "req" when dragging stops.
Also, you can also totally rewrite this in a more standard form:
function req () {
...
and it will be the exact same thing. Also, you can do:
$(function() {
instead of:
$(document).ready(function() {
and you can merge your two draggable calls. So ... if I were writing it, the final code would be:
function req () {
...*insert code for req here*...
};
$(function() {
$(".draggable").draggable({
containment: '#container',
scroll: false,
stack: { group: '#container', min: 1 },
stop: req
});
$("*", document.body).click(function (e) {
var offset = $(this).offset();// get the offsets of the selected div
e.stopPropagation();
var theId = $(this).attr('id');// get the id of the selceted div
$("#result").text(this.tagName + " id=" + theId + " (" + offset.left + "," + offset.top +")");
//post x,y to php (and the id of the elemnt)
$.post("http://localhost/index.php", "id=" + theId + "&x=" + offset.left + "&y=" + offset.top);
});
req();
});

Answer 3

Maybe you can associate it with the mouseup event?
http://docs.jquery.com/Events/mouseup#fn
Instead of associating the draggable object directly with the AJAX call, associate it with a trigger which you can use to activate the mouseleave.