Mass framework droppable plug-in

The second bullet of the mass framework drag-and-drop component, one of the eight behavior components, droppable is finally completed. It is used to process the relationship between drag-and-drop blocks and placed objects. There is a better name for the object to be placed in my framework: shooting range. A drag-and-drop block is equivalent to a missile, and its range of activity is its range, so the object to be placed is its range.

In the HTML5 native drag-and-drop API, when an element becomes a shooting range, it can bind the following four events:

• Dragenter: Execute this callback when the cursor enters the shooting range.
• Dragover: When the cursor enters the shooting range, execute this callback.
• Dragleave: Execute this callback when the cursor enters the shooting range.
• Drop: When the cursor enters the shooting range and moves the cursor over it, run this callback.

As described above, the native placement API can only process the relationship between the cursor and placement, which is the same as that of mouseenter, mouseleave, and mousemove. If I want to change other triggering rules, I will stop, for example, if I only want to drag a block half of its area into the shooting range to trigger dragenter, or if it is completely within the shooting range, or if there is an intersection, therefore, relying solely on these native events is far from enough. Therefore, one of the droppable parameters of the mass framework is tolerance, which is used to customize the trigger mode. The default value is Pointer mode, that is, W3C mode. When the mouse enters the shooting range, the dragenter callback is triggered. When the mouse leaves, the dragleave callback is triggered. In intersect mode, when the drag block overlaps the shooting range, the dragenter callback is triggered. In the middle mode, the dragenter callback is triggered only when half of the area of the drag block enters the shooting range. In fit mode, the dragenter callback is triggered only when the drag block is completely within the shooting range.

To be honest, the droppable of mass Framework draws on script. aculo. us in many places. This is a great library, the strongest animation library in history, and no one can beat it yet. The same is true for jquery UI, which is also improved based on script. aculo. Us. But script. aculo. Us, jquery UI, droppable and dragable are two different systems, and events are tied to two elements. Drag, dragstart, and dragend belong to the draggable tube, drop, dragenter, dragmove, and dragleave belong to the droppabke tube, which seriously violates its internal implementation mechanism. When we drag a data body, it contains its own azimuth size and various event Callbacks. In addition, there is an array containing its acceptable range. This jquery UI has the accept parameter for processing. The selector engine waits for a group of objects to be placed and then converts them to the data body containing the azimuth size and Event Callback. Script. aculo. Us adds a database through droppables. Add. The droppable data body must be included in the draggable data body. Otherwise, the relationship such as overlapping and intersection cannot be determined. In this case, all parameters should be defined in one unit at the beginning. In addition, mass framewor refers to the intention of K to take the droppable, instead of placing it. It is considered that droppable is an enhancement of draggable, and droppable is available first, so I will not copy the script here. aculo. US interface definition. Turning droppable into a draggable can be regarded as a "superinnovation" (n times better than "micro-innovation !)

 
$. Define ("droppable", "More/draggable", function (draggable) {draggable. implement ({// enhancements for droppable}) $. FN. droppable = function (hash) {return this. draggable (hash )}});
 

The following is an example. For more examples and documents, see GitHub.

$. Require ("Ready, more/droppable", function () {$ ('. drag '). droppable ({range :". drop ", // specify the CSS expression hoverclass:" active ", // when you drag a block to the shooting range, add the class name tolerance: function (event, CEP, DRP) {// specify the trigger rule var r = DRP. width/2, x = DRP. left + R, y = DRP. top + R, H = math. min (math. ABS (X-CEP. left), math. ABS (X-CEP. right), V = math. min (math. ABS (Y-msc. top), math. ABS (Y-msc. bottom); If (DSC. top y) return H x) return v
 
Please drag the flash clock animation in the upper left corner of the blog only after it appears.