JavaScript Advanced Programming native drag-and-drop and Media Elements

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.