The drag-and-drop engine in VS .NET

Generator PDF 417 in VS .NET The drag-and-drop engine

The drag-and-drop engine
Creating PDF417 In VS .NET
Using Barcode generator for ASP.NET Control to generate, create PDF417 image in ASP.NET applications.
www.OnBarcode.com
Drawing Matrix 2D Barcode In Visual Studio .NET
Using Barcode encoder for ASP.NET Control to generate, create Matrix 2D Barcode image in ASP.NET applications.
www.OnBarcode.com
startDragDrop()
QR Creator In VS .NET
Using Barcode generator for ASP.NET Control to generate, create QR Code JIS X 0510 image in ASP.NET applications.
www.OnBarcode.com
Generating GS1-128 In .NET
Using Barcode creator for ASP.NET Control to generate, create EAN / UCC - 14 image in ASP.NET applications.
www.OnBarcode.com
registerDropTarget()
Create Barcode In .NET
Using Barcode creation for ASP.NET Control to generate, create Barcode image in ASP.NET applications.
www.OnBarcode.com
Linear 1D Barcode Encoder In .NET Framework
Using Barcode generation for ASP.NET Control to generate, create Linear 1D Barcode image in ASP.NET applications.
www.OnBarcode.com
Draggable Item
Making Data Matrix ECC200 In Visual Studio .NET
Using Barcode printer for ASP.NET Control to generate, create DataMatrix image in ASP.NET applications.
www.OnBarcode.com
Create International Standard Serial Number In .NET Framework
Using Barcode drawer for ASP.NET Control to generate, create ISSN - 10 image in ASP.NET applications.
www.OnBarcode.com
DragDropManager
PDF-417 2d Barcode Reader In Visual C#.NET
Using Barcode reader for .NET Control to read, scan read, scan image in .NET applications.
www.OnBarcode.com
PDF 417 Creator In None
Using Barcode printer for Online Control to generate, create PDF417 image in Online applications.
www.OnBarcode.com
Drop Target
Code 128 Code Set A Encoder In None
Using Barcode encoder for Microsoft Excel Control to generate, create Code128 image in Office Excel applications.
www.OnBarcode.com
Code 128 Maker In Java
Using Barcode generation for BIRT Control to generate, create Code 128 Code Set C image in Eclipse BIRT applications.
www.OnBarcode.com
IDragSource
GTIN - 13 Creator In None
Using Barcode encoder for Online Control to generate, create UPC - 13 image in Online applications.
www.OnBarcode.com
Painting QR-Code In C#
Using Barcode generator for VS .NET Control to generate, create QR Code ISO/IEC18004 image in VS .NET applications.
www.OnBarcode.com
IDropTarget
Barcode Creator In Java
Using Barcode maker for BIRT reports Control to generate, create Barcode image in BIRT applications.
www.OnBarcode.com
Printing Barcode In Objective-C
Using Barcode generator for iPhone Control to generate, create Barcode image in iPhone applications.
www.OnBarcode.com
Data Transfer
QR Code JIS X 0510 Creation In Objective-C
Using Barcode drawer for iPhone Control to generate, create QR Code ISO/IEC18004 image in iPhone applications.
www.OnBarcode.com
PDF-417 2d Barcode Maker In Java
Using Barcode creator for Java Control to generate, create PDF417 image in Java applications.
www.OnBarcode.com
Diagram of the Microsoft Ajax drag-and-drop engine
Paint Universal Product Code Version A In None
Using Barcode maker for Word Control to generate, create UPC-A Supplement 5 image in Word applications.
www.OnBarcode.com
Creating Barcode In None
Using Barcode creator for Font Control to generate, create Barcode image in Font applications.
www.OnBarcode.com
12.1.2 A simple scenario for drag and drop
Suppose that recently you were promoted to IT Director at your company (it s about time!). As new developers come aboard, you want to make sure they have access to the right tools. To start, you create a shopping list of essential books that each individual needs. This concept is illustrated in figure 12.4, which shows images of a book and a shopping cart. You want to be able to drag the book over the cart to have it added to the list of books to buy. The data transferred can be represented by the book s ISBN code, which is its unique identification number. Needless to say, you want to implement this scenario with the Microsoft Ajax dragand-drop engine. To reach this objective, you have to apply what you learned in the previous section about the drag-and-drop engine. You need to code the following:
A client control that represents the draggable item, in this case a book The associated DOM element can be either the book image or a div element that contains the image. The control implements the logic needed to deal with the DragDropManager and receives its feedback by implementing the IDragSource interface. The control also encapsulates the data that you need to access: the ISBN number. A client control that represents the drop target, in this case the shopping cart Again, the associated DOM element can be either the cart image or a div element that contains the image. By implementing the IDropTarget interface, you can receive the feedback provided by the DragDropManager.
Dragging and dropping
Figure 12.4 Example of a drag-and-drop operation that involves adding a book to a shopping cart
In the following sections, we ll show you how to build these controls and explain the nuts and bolts of the drag-and-drop engine. In the process, you ll write the code in a manner in which it can be reused for different scenarios. Let s start learning how to create a draggable item.
12.1.3 Creating a draggable item
When you want to perform drag and drop, you always click an item onscreen for example, an icon with the left mouse button (Click on a Mac). Then, you move the mouse and begin dragging. This behavior is also reasonable for DOM elements, and it s the reason you always trigger a drag-and-drop operation by hooking the mousedown event of the draggable DOM element. A draggable item triggers a drag-and-drop operation in the following way:
It hooks up the mousedown event of the associated DOM element. In the event handler, it calls the startDragDrop method on the DragDropManager.
The drag-and-drop engine
In the following example, you ll create a client control whose associated element can be dragged around the page. The control is called BookItem, and it represents the book in the scenario outlined in the previous section. The code in listing 12.2 contains the logic that every draggable item must implement to deal with the DragDropManager.
Listing 12.2 Code for the BookItem control, which represents a draggable item
Type.registerNamespace('Samples'); Samples.BookItem = function(element) { Samples.BookItem.initializeBase(this, [element]); this._bookId = null; this._dragStartLocation =
null; Store original } location of element Samples.BookItem.prototype = { initialize : function() { Samples.BookItem.callBaseMethod(this, 'initialize');
$addHandlers(this.get_element(), {mousedown:this._onMouseDown}, this); },
Hook up mousedown event
dispose : function() { $clearHandlers(this.get_element()); Samples.BookItem.callBaseMethod(this, 'dispose'); }, _onMouseDown : function(evt) { window._event = evt; evt.preventDefault();
Store event object in window instance
Sys.Preview.UI.DragDropManager.startDragDrop(this, this.get_element(), null); }, get_bookId : function() { return this._bookId; }, set_bookId : function(value) { this._bookId = value; }
E Start dragand-drop
operation
} Samples.BookItem.registerClass('Samples.BookItem', Sys.UI.Control);
Dragging and dropping
The mousedown event of the associated element is hooked up C in the initialize method. In the event handler E, _onMouseDown, you call the startDragDrop method of the DragDropManager, passing a reference to the current instance and the associated element as arguments. Note that you store the event object in the window._event property D. This is required by the DragDropManager in order to access the event object for the mousedown event. The _dragStartLocation field B stores the x and y coordinates of the location of the associated element before it starts being dragged. You save the original location of the element because you may need to restore it if the drag-and-drop operation fails. Later, you ll see how you can establish whether a drag-and-drop operation succeeded or failed. The key to start a drag-and-drop operation is to call the DragDropManager s startDragDrop method. For this reason, it s important to understand the various parameters accepted by this method.
Copyright © OnBarcode.com . All rights reserved.