На нашем ресурсе вы можете поделиться своими или бесплатно скачать книги для разработчиков на PHP, Mysql, Ajax, Ruby on Rails, C++, Unix, WinApi, C# sharp, .NET, Java, UML, различным Frameworks. 

CHAPTER 9

drag-and-drop. Don't confuse this system-enabled drag-and-drop with the oper-
ations we're going to enable on our pages.

Now, click the Apply button, and observe that the executed command is dis-

played as follows:

$('#testSubject').draggable({});

Try dragging the dragon image again. Note how you can make the dragon fly
around the browser window. (No flapping wings though--that'd be a more
advanced animation!) Also, note how you can move the image to the edges of the
window and, when moved to the extreme right, it causes a horizontal scrollbar to
appear where none was before (in most browsers).

Drop the dragon, and pick him up again. Move him around as many times as

you like. Observe how the values in the console are kept up to date during a drag
operation. This is effected using the

start

,

stop

, and

drag

callbacks.

Exercise 2--Reload the page to restore initial conditions. If you're using Firefox

or Camino, these browsers have an annoying feature: Form controls aren't
restored to initial conditions when you reload a page using the Reload toolbar
button. To cause the page to reload to initial conditions, move the text focus to
the

URL

address field and hit the Enter key.

Now, set the

helper

option to Original, click the Apply button, and drag the

Test Subject image around the window. You should notice no difference from
the behavior of exercise 1 because Original is the default setting when

helper

is

Unspecified. Change the value to Clone, and click Apply.

Now when you drag the image, you see a copy of the image being dragged

about rather than the original element. Once you conclude the drag, the clone
disappears.

Exercise 3--Leaving everything as you left it at the end of exercise 2, click the

Disable button, and note the command that's issued:

$('#testSubject').draggableDisable();

Try to drag the dragon. Nothing happens. Now click the Enable button, which
issues the following command:

$('#testSubject').draggableEnable();

Note that you can drag again and that the original options (in this case the clone
helper) are still in effect, demonstrating the difference between

draggable-

Destroy()

, which removes drag capability completely, and

draggableDisable()

,

which only suspends it until

draggableEnable()

is called.