Home > Industries > Media
First, the native drag and drop
The earliest introduction of JavaScript drag-and-drop functionality in Web pages was IE4, when only two objects in a Web page could be dragged and dropped: images and some text. Now, almost any element in the page can be dragged and dropped as a drop target. Here are some of the things that are related to drag and drop:
1. Drag and Drop events
In a drag-and-drop event, 3 events are triggered sequentially on the dragged element and on the element that is the drop target:
Dragged elements: dragstart----Drag----dragend
The element that is the drop target: dragenter----dragover---dragleave (the element is dragged out of the target) or drop (the element is placed in the drop target)
2. Custom Drop targets
When you drag an element through some invalid drop target, you see a special cursor (with a backslash in the ring) that indicates that it cannot be placed. By overriding the default behavior of the DragEnter and DragOver events, and by canceling the default behavior of the drop event (in Firefox), you can support any element as a drop target.
var droptarget = document.getElementById ("DropTarget"); // default behavior for blocking DragOver function (event) { Eventutil.preventdefault (event);}); // default behavior for blocking DragEnter function (event) { Eventutil.preventdefault (event);}); // default behavior to prevent drop function (event) { Eventutil.preventdefault (event);});3. DataTransfer Object
It is useless to simply drag and drop without data changes. In order to implement the data exchange during the drag-and-drop operation, IE5 implements the DataTransfer object, which has two methods of SetData () and GetData (). For example, when dragging a text, the browser calls the SetData method, saves the dragged text in the "text" format in the DataTransfer object, and reads the data through GetData () when the element is dragged and dropped to the drop target.
// set and accept text data event.dataTransfer.setData ("text", "some text"); var text = event.dataTransfer.getData ("text"); // set and accept URLs // Save the data in a URL format that the browser will use as a link event.dataTransfer.setData ("URL", "http://www.baidu.com") in the Web page; var url = event.dataTransfer.getData ("url");4, DropEffect and effectallowed
The DataTransfer object has two properties, DropEffect and effectallowed, through which you can determine what action the dragged element and the element that is the drop target can receive.
5, can be dragged
By default, only images, links, and text can be dragged. For other elements, add the property draggable= "false" to make it non-draggable; Add Property draggable= "true" to drag.
Second, the Media Elements
1. Embed Media Elements in the page
HTML5 has added <audio> and <video> tags so that it can embed cross-browser audio in a Web page without having to rely on any plug-ins to be video content. Both tabs provide a number of events and properties that provide information about the current state of the media.
<!--Embed video -<VideoID= "Myvideo"> <!--Not all browsers support all formats, so you can specify multiple different media sources - <SourceSCR= "1.WEBM"type= "VIDEO/WEBM; codecs= ' vp8, Vorbis '"> <SourceSCR= "2.OGV"type= "Video/ogg; codecs= ' Theora, Vorbis '"> <SourceSCR= "3.mpg"> <!--the contents of the start and end tags belong to the fallback content, which is displayed when the browser does not support both media elements. -Video player not available.</Video><!--Embed Audio -<AudioID= "Myaudio"> <SourceSCR= "Song1.ogg"type= "Audio.ogg"> <SourceSCR= "Song2.mp3"type= "Audio.mpeg">Audio player not available.</Audio>
2. Custom Media Player
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8"> <title>Custom Media Player</title> </Head> <Body> <Divclass= "MediaPlayer"> <Divclass= "Video"> <Videosrc= "1.mp4"ID= "Player"Poster= "Image1.png"width= "+"Height= "$">Video Player not available. </Video> </Div> <Divclass= "Controls"> <inputtype= "button"value= "Play"ID= "Video-btn"> <spanID= "Curtime">0</span>/<spanID= "duration">0</span> </Div> </Div> <Script> //get a reference to an element varplayer=document.getElementById ("player"), BTN=document.getElementById ("video-btn"), Curtime=document.getElementById ("Curtime"), Duration=document.getElementById ("Duration"); //Add a time handler for the button, the DOM2 level event handler is used, IE is not supportedBtn.addeventlistener ("Click", function(){ if(player.paused) {player.play (); Btn.value= "Pause"; }Else{player.pause (); Btn.value= "Play"; } },false); //timed Update TimeSetInterval (function() {curtime.innerhtml=Player.currenttime; Duration.innerhtml=player.duration; }, -); </Script> </Body></HTML>
JavaScript Advanced Programming native drag-and-drop and Media Elements
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
