JavaScript Tutorial/Drag Drop/Drag Drop Event

Материал из Web эксперт
Версия от 11:24, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Drop target events fire now

   <source lang="javascript">

<html>

   <head>
       <title>System Drag And Drop Example</title>
       <script type="text/javascript">
           function handleDragDropEvent(oEvent) {
               var oTextbox = document.getElementById("txt1");
               oTextbox.value +=  oEvent.type + "\n";
               switch(oEvent.type) {
                   case "dragover":
                   case "dragenter":
                       oEvent.returnValue = false;
               }
           }
       </script>
   </head>
   <body>

Try dragging the text from the textbox to the red square. Drop target events fire now.

drag me

</p>

<textarea rows="10" cols="25" readonly="readonly" id="txt1"></textarea>

   </body>

</html></source>


Get drag and drop event type: dragenter

   <source lang="javascript">

<html>

   <head>
       <title>System Drag And Drop Example</title>
       <script type="text/javascript">
           function handleDragDropoEvent(oEvent) {
               switch(oEvent.type) {
                   case "dragenter":
                       oEvent.dataTransfer.dropEffect = "move";
                       break;
               }
           }
       </script>
   </head>
   <body>

Try dragging the text in the textbox to the right textbox.

<input type="text" value="drag this text" ondragstart="handleDragDropoEvent(event)" /> <input ondragenter="handleDragDropoEvent(event)" ondragover="handleDragDropoEvent(event)" ondrop="handleDragDropoEvent(event)"> </input>

   </body>

</html></source>


Get drag and drop event type: dragover

   <source lang="javascript">

<html>

   <head>
       <title>System Drag And Drop Example</title>
       <script type="text/javascript">
           function handleDragDropoEvent(oEvent) {
               switch(oEvent.type) {
                   case "dragover":
                       oEvent.returnValue = false;
                       break;
               }
           }
       </script>
   </head>
   <body>

Try dragging the text in the textbox to the right textbox.

<input type="text" value="drag this text" ondragstart="handleDragDropoEvent(event)" /> <input ondragenter="handleDragDropoEvent(event)" ondragover="handleDragDropoEvent(event)" ondrop="handleDragDropoEvent(event)"> </input>

   </body>

</html></source>


Get drag and drop event type: dragstart

   <source lang="javascript">

<html>

   <head>
       <title>System Drag And Drop Example</title>
       <script type="text/javascript">
           function handleDragDropoEvent(oEvent) {
               switch(oEvent.type) {
                   case "dragstart":
                       oEvent.dataTransfer.effectAllowed = "move";
                       alert("dragstart");
                       break;
               }
           }
       </script>
   </head>
   <body>

Try dragging the text in the textbox to the right textbox.

<input type="text" value="drag this text" ondragstart="handleDragDropoEvent(event)" /> <input ondragenter="handleDragDropoEvent(event)" ondragover="handleDragDropoEvent(event)" ondrop="handleDragDropoEvent(event)"> </input>

   </body>

</html></source>


Get drag and drop event type: drop

   <source lang="javascript">

<html>

   <head>
       <title>System Drag And Drop Example</title>
       <script type="text/javascript">
           function handleDragDropoEvent(oEvent) {
               switch(oEvent.type) {
                   case "drop":
                       oEvent.returnValue = false;
                       oEvent.srcElement.innerHTML = oEvent.dataTransfer.getData("text");
               }
           }
       </script>
   </head>
   <body>

Try dragging the text in the textbox to the right textbox.

<input type="text" value="drag this text" ondragstart="handleDragDropoEvent(event)" /> <input ondragenter="handleDragDropoEvent(event)" ondragover="handleDragDropoEvent(event)" ondrop="handleDragDropoEvent(event)"> </input>

   </body>

</html></source>


Get text object from dataTransfer defined the Drag and drop event

   <source lang="javascript">

<html>

   <head>
       <title>System Drag And Drop Example</title>
       <script type="text/javascript">
           function handleDragDropEvent(oEvent) {
               switch(oEvent.type) {
                   case "dragover":
                   case "dragenter":
                       oEvent.returnValue = false;
                       break;
                   case "drop":
                       alert(oEvent.dataTransfer.getData("text"));
               }
           }
       </script>
   </head>
   <body>

show you the selected text when dropped.

<input type="text" value="drag this text" /> <input type="test" ondragenter="handleDragDropEvent(event)" ondragover="handleDragDropEvent(event)" ondrop="handleDragDropEvent(event)"></input>

   </body>

</html></source>


Get URL object from dataTransfer defined the Drag and drop event

   <source lang="javascript">

<html>

   <head>
       <title>System Drag And Drop Example</title>
       <script type="text/javascript">
           function handleDragDropEvent(oEvent) {
               switch(oEvent.type) {
                   case "dragover":
                   case "dragenter":
                       oEvent.returnValue = false;
                       break;
                   case "drop":
                       alert(oEvent.dataTransfer.getData("URL"));
               }
           }
       </script>
   </head>
   <body>

Try dragging the link to the red square. It will show you the URL when dropped.

<a href="http://www.wbex.ru">www.wbex.ru</a> <input type="text" ondragenter="handleDragDropEvent(event)" ondragover="handleDragDropEvent(event)" ondrop="handleDragDropEvent(event)"></div>

   </body>

</html></source>


No drop target events fire

   <source lang="javascript">

<html>

   <head>
       <title>System Drag And Drop Example</title>
       <script type="text/javascript">
           function handleDragDropEvent(oEvent) {
               var oTextbox = document.getElementById("txt1");
               oTextbox.value +=  oEvent.type + "\n";
           }
       </script>
   </head>
   <body>

Try dragging the text from the textbox to the red square. No drop target events fire.

Drag me

</p>

<textarea rows="10" cols="25" id="txt1"></textarea>

   </body>

</html></source>