jquery hover event between mousedown and mouseup - possible?

Question

If you imagine in microsoft paint you can click and hold to paint in an area, id like to do a similar but adding a class to cells in a table:

(note this isnt for painting/art just an easy way of explaining it!)

the following isnt working...

$(function(){
    $('td').mousedown(function(){
    console.log('down');
      $('td').bind('hover', function(){
        $(this).addClass('booked');
      });
    })

    $('td').mouseup(function(){
       $('td').unbind('hover');
    });
})

this could help:http://stackoverflow.com/questions/1569775/how-do-i-find-the-dom-node-that-is-at-a-given-x-y-position-hit-test — elias, Apr 19 '10 at 13:34

score 1 · Answer 1 · answered Apr 19 '10 at 13:30

1

There's no "hover" event. Why not just add the class in the "mousedown" handler and remove it in "mouseup"?

If you want the class to be added only after a delay, then set a timeout in "mousedown" to add the class, and cancel the timeout in "mouseup" (and also remove the class).

$(function(){
  var timeout;
  $('td')
    .mousedown(function(){
      var $cell = $(this);
      timeout = setTimeout(function() {
        $cell.addClass('booked');
      }, 1000);
    })
    .mouseup(function(){
      cancelTimeout(timeout);
      $(this).removeClass('booked');
    });
});

answered Apr 19 '10 at 13:30

Pointy

405,095
59
585
614

1

hi thanks pointy, I'm trying to do a drag-n-paint on effect, have got it sorted now using mousenter() instead of hover() – Haroldo Apr 19 '10 at 13:32
But there's a `hover()` jQuery function. ;) http://api.jquery.com/hover/ I think he wants the user to click and hold a table cell and then drag the mouse over any cells that need hilighting. On mouseup this behaviour should stop. – Tomalak Apr 19 '10 at 13:33
There is a "hover" function but it's a convenience wrapper around mouseenter and mouseleave. @Tomalak if that's what he wants it's very poorly explained. – Pointy Apr 19 '10 at 13:34
I'm deducing this from the CSS class name he uses ("booked"). This would imply a calendar control in which you can book days by starting at one day and dragging over any days you want in the range. – Tomalak Apr 19 '10 at 13:53
Well I guess that makes sense - I applaud your powers of divination – Pointy Apr 19 '10 at 14:14

score 0 · Answer 2 · answered Apr 19 '10 at 13:32

Take a look at jQuery UI Selectable, which does something similar to what you described. Take a look at the demo. Simple implementation example:

<script type="text/javascript">
$(function() {
    $("#selectable").selectable();
});
</script>

<ol id="selectable">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
</ol>

score 0 · Answer 3 · answered Apr 19 '10 at 13:33

0

solved:

mouseenter() rather than hover() which as Pointy pointed out is not explicitly a function

answered Apr 19 '10 at 13:33

Haroldo

36,607
46
127
169

jquery hover event between mousedown and mouseup - possible?

3 Answers3