1

This is more the theoretical type of question.

In my web-application i want to create a button that the user can click and therefore initiate a move-mode during which (until the mouse is released) all the mouse movements are being translated onto a certain DIV.

To better understand what i mean, think of a box in which to show a portion of an image (box is overflow:hidden) - i want to make it possible to move the image around within the box, but not by directly dragging the image, but by dragging a handle instead (a handle that does not move when dragged)

In the optimum case the mouse cursor hides while the drag operation is on.

My basic idea was to use a draggable but i got no clue on how to make it accessible, yet invisible.

How would i accomplish that using javascript/jQuery?

SquareCat
  • 5,699
  • 9
  • 41
  • 75
  • You mean something like this? http://jsfiddle.net/q6r8f/37/ (Note, I'm totally manipulating a previous fiddle from another answer, so it's not meant to be "perfect".) – Jared Farrish Sep 09 '12 at 22:49
  • Technically, almost. But without the drag operation stopping when the area is left. And without the mouse cursor staying visible (although i guess this could be handles using a blank cursor image per css?) – SquareCat Sep 09 '12 at 22:51
  • You might see [my answer here](http://stackoverflow.com/questions/11271704/jquery-drag-div-css-background/11272092#11272092). I've considered turning that approach into a plugin, but haven't gotten motivated to do it yet. – Jared Farrish Sep 09 '12 at 22:53
  • Good stuff! Thanks for the input! – SquareCat Sep 09 '12 at 22:54

2 Answers2

2

Making the cursor invisible isn't too difficult, see the top two answers on this question.

As for the handle, you could try using jQuery UI Draggable's handle option. The key to making the handle appear stationary is to have a separate element that looks like the handle, and position the real handle (which would be an empty element) on top of it.

You would then position the real handle back where it was, covering the fake handle, when the stop() event is fired.

So, in the start() event, you would add a class to the real handle that makes the cursor invisible (using either of the methods in the post mentioned earlier), and remove that class when the stop() event fires, causing the cursor to reappear.

Community
  • 1
  • 1
Kelvin
  • 5,227
  • 1
  • 23
  • 36
1

The easiest approach would probably be to just apply different CSS styles on the click event of the button.

Add a class to your element (on click) for the :hover pseudo-class that has cursor: move; for its style and has cursor: none; for the :active pseudo-class. You could then have these styles removed once the user's mouse left the draggable area.

On click the function might look like this:

$('#myButton').click(function(){
   $('#myDraggableElement').addClass('draggable');
});
$('#myDraggableElement').mouseLeave(function(){
   $(this).removeClass('draggable');
});

Have I understood the question correctly?

Phil.Wheeler
  • 16,748
  • 10
  • 99
  • 155
  • That's great input regarding the cursor issue. Good approach. But the main issue is the drag operation itself. – SquareCat Sep 09 '12 at 22:52
  • Oh! So if you need something to be draggable, why wouldn't you use the jQueryUI interaction? http://jqueryui.com/demos/draggable/ – Phil.Wheeler Sep 09 '12 at 22:55
  • Because i needed an area to move while something that is not visible is being draggable. Of course, in the end, jquery draggable will be used, but with a few adaptions to its usual "look&feel" :) – SquareCat Sep 09 '12 at 23:13