CODEWITHSUNDEEP
javascriptjqueryjquery-uiclick
Truvia
Truvia

Reputation: 370

Jquery/Javascript Click and Hold

I have a series of cells that when clicked get cloned and appended to a seperate table (of one row). When cells are clicked on in this second table they return to where they were in the previous table (or rather they get removed and the original cell fadesTo solid. However I need the cells in this second table (the #answertable to be .sortable(). I can move them around find, but as as soon as I let go, the original on click function gets executed and the cell disappears.

Answertable sortable code:

$(function () {
  $("#answertable tr").sortable();
  $("#answertable tr").disableSelection();
});

Relevant cells code (the fadeOut() bit really):

$(answertablecells).click(function(){
    var num = $(this).attr("id");
    for(var i=12; i < num.length; i++) {
      var nums = num.substr(i, i++, i++);
    }               
    $('#in_answerbox' + nums + "a").fadeTo('fast', 1).removeAttr('id');
    $(this).fadeOut('slow').removeAttr('id').remove();
});

I need all of the above to run when you click on it, but not when you sortable. Basically I want the hold to cancel the on click event but not the sortable event.

Any suggestions? All help appreciated!

Upvotes: 0

Views: 1004

Answers (1)

razz
razz

Reputation: 10110

You can calculate the duration of the click and call the fadeout function if the duration is less than some value i.e. (250ms):

function myfunction(){
    var num = $(this).attr("id");
    for(var i=12; i < num.length; i++) {
        var nums = num.substr(i, i++, i++);
    }               
    $('#in_answerbox' + nums + "a").fadeTo('fast', 1).removeAttr('id');
    $(this).fadeOut('slow').removeAttr('id').remove();
}

var longpress = false, startTime, endTime;

$(answertablecells).on('click', function (e) {
    if (!longpress) myfunction();
});

$(answertablecells).on('mousedown', function () {
    startTime = new Date().getTime();
});

$(answertablecells).on('mouseup', function () {
    endTime = new Date().getTime();
    longpress = (endTime - startTime < 250) ? false: true;
});

jsfiddle

Upvotes: 1

Related Questions