The combination of HTML5 drag behavior and Angularjs

I. Drag-and-drop behavior of HTML5

1. Set the element to be drag and drop: Set the Draggable property to True.

Example: <div id= "Drag1" draggable= "true" ></div>

(Note: IMG and href A default is auto, which means it can be dragged, and the other elements are not draggable.) For security reasons, it is recommended that you add draggable= ' true ' settings to all draggable elements.

2. Drag-and-drop element events:

1). DragStart: Triggered before dragging, that is, the mouse is pressed, the drag element is dragged by the moment the trigger.

Event.datatransfer: Pass data, data type is string and file type.

Event.datatransfer Most of the settings are configured here, that is, through the Event.datatransfer to save the dragged data, such as: E.datatransfer.setdata ("Text", e.target.id);

Event.dataTransfer.effectAllowed: Used to set the action that the dragged element can perform

example:event.dataTransfer.effectAllowed = "link"; Limit DropEffect property value to link, otherwise the mouse pointer is a forbidden style

Mousemove,mouseover,mouseenter,mouseleave,mouseout events for other elements are not triggered after the DragStart event is triggered

2). Drag: Continuous trigger between drag and drop, even if the mouse does not move, as long as not released, will trigger.

3). Dragend: Drag the end trigger, that is, release the mouse trigger.

3. Target Element Event:

1). DragEnter: Enter target element trigger, equivalent to MouseOver

2). DragOver: Triggered when the dragged element moves on the target element, equivalent to MouseMove

Fill in the event: Event.preventdefault ().

(Note: The default behavior of the event is to not allow the dragged element to be freed or placed on other elements (i.e., the drop event cannot be triggered), and the default behavior needs to be blocked by Event.preventdefault () to trigger subsequent drop events)

DropEffect: Drag-and-drop operation type that determines how the browser displays the mouse shape, with possible values of copy, move, link, and none.

You can set the value of DropEffect here, the default behavior of the event is to set DropEffect to none.

For example: E.datatransfer.dropeffect = "link"

3). DragLeave: Triggered when a dragged element leaves the target element

4). Drop: Triggered when the dragged element is placed on the target element (releasing the mouse)

(Note: For foreign dragged elements (hyperlinks, files, picture sources), the default behavior of the drop event is that the browser redirects the current page to the resource that the dragged element points to

The default behavior for the dragged element within the document, ie10+ and Chrome, is not, and the default behavior of FF is to open a new document to access the resource that the dragged element points to)

4. Sequence of event executions

1) drop does not trigger when: DragStart > Drag > DragEnter > DragOver > DragLeave > Dragend

2) Drop Trigger (DragOver block default event): DragStart > Drag > DragEnter > DragOver > Drop > Dragend

Two: Drag-and-drop events and angular JS combination

Html

<! DocType html>"myApp">"Utf-8"/> <script type="Text/javascript"Src="Angular.js"></script> <script type="Text/javascript"Src="Dragdirective.js"></script> <script type="Text/javascript"Src="Mydrag.js"></script> <style type="Text/css">. Mydemo>Div {display:inline-Block; }. Mydemo> div >Div {width:150px;                height:100px;                BORDER:1PX dotted grey; Display:inline-Block; float: Left; Margin-right:20px; }    </style>"Mydragcontroller as VM" class="Mydemo"> <div> <div ruby-drop="Vm.drop (Event)"Ruby-dragover="Vm.dragover (Event)"> "Ruby.png"draggable="true"ruby-dragstart="Vm.dragstart (Event)"Id="Imgid"/> </div> <div ruby-drop="Vm.drop (Event)"Ruby-dragover="Vm.dragover (Event)"></div> </div></body>
       Js->dragdirective.js 
 
(function () {"Use strict" var convertfirstuppercase = function (str) {return str.replace (/(\w)/, function        (s) {return s.touppercase ();    });    } angular.module ("myApp", []);    var MyApp = angular.module ("myApp"), rubydrageventdirectives = {}; Angular.foreach ("DragStart drag dragenter dragover drop DragLeave dragend". Split ("), function (EventName) {var r        Ubyeventname = ' Ruby ' + convertfirstuppercase (eventName);                Rubydrageventdirectives[rubyeventname] = [' $parse ', function ($parse) {//$parse statement resolver return { Restric: ' A ', compile:function (Ele, attr) {var fn = $parse (attr[rubyeventn                    AME]); return function Rubyeventhandler (scope, ele) {Ele[0].addeventlistener (EventName, function (event) {if (EventName = = ' DragOver ' | | eventName = = ' Drop ') {EVENT.PR EventdefAult ();                            } var callback = function () {fn (scope, {event:event});                            };                        Callback ();                    });    }                }            }        }]    }); Myapp.directive (rubydrageventdirectives);}) ();
Js->mydrag.js
(function () {    "use strict"    if (window.angular) {        angular.module ("MYAPP"). Controller ("Mydragcontroller" , Mydragcontroller);        Mydragcontroller. $inject = [' $scope '];        function Mydragcontroller ($scope) {            $scope. Vm.dragstart = function (e) {                e.datatransfer.setdata ("Text", e.target.id);            };            $scope. Vm.dragover = function (e) {                e.preventdefault ();            };            $scope. Vm.drop = function (e) {                e.preventdefault ();                var data = E.datatransfer.getdata ("Text");                E.target.appendchild (document.getElementById (data));}}    ) ();
(Note: Internet Explorer 9, Firefox, Opera 12, Chrome, and Safari 5 support drag-and-drop.) ）
The combination of HTML5 drag behavior and Angularjs