Matukio ya ondrag

Makala ya Mtaarifu

Mwongozo wa JS

JavaScript

Window

DOM ya HTML

API ya Web

HTML Mwongozo

</a></li> <li><a href="/sw/jsref/dom_obj_time.html" title="HTML DOM Time mguu"><time></a></li> <li><a href="/sw/jsref/dom_obj_title.html" title="HTML DOM Title mguu"><title></a></li> <li><a href="/sw/jsref/dom_obj_track.html" title="HTML DOM Track mguu"><track></a></li> <li><a href="/sw/jsref/dom_obj_u.html" title="HTML DOM Underline mguu"><u></a></li> <li><a href="/sw/jsref/dom_obj_ul.html" title="HTML DOM Ul mguu"><ul></a></li> <li><a href="/sw/jsref/dom_obj_var.html" title="HTML DOM Variable mguu"><var></a></li> <li><a href="/sw/jsref/dom_obj_video.html" title="HTML DOM Video mguu"><video></a></li> </ul> <h2>其他参考手册</h2> <ul> <li><a href="/sw/jsref/obj_cssstyledeclaration.html" title="CSSStyleDeclaration mguu">CSSStyleDeclaration</a></li> <li><a href="/sw/jsref/jsref_type_conversion.html" title="JavaScript mabaki ya utunzi">JS 类型转换</a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/sw/howto/index.html" title="Kifurushi cha CodeW3C.com">Kifurushi cha CodeW3C.com</a></li> </ul> </div> </div> <div id="maincontent"> <div class="idea"> <a href="/"><button>English</button></a> <a href="/zh/"><button>中文</button></a> <a href="/oldzh/"><button>繁體中文</button></a> <a href="/ru/"><button>Русский</button></a> <a href="/fr/"><button>Français</button></a> <a href="/de/"><button>Deutsch</button></a> <a href="/es/"><button>Español</button></a> <a href="/pt/"><button>Português</button></a> <a href="/ja/"><button>日本語</button></a> <a href="/ko/"><button>한국어</button></a> <a href="/it/"><button>Italiano</button></a> <a href="/ar/"><button>عربي</button></a> <a href="/hi/"><button>हिंदी</button></a> <a href="/bn/"><button>বাংলা</button></a> <a href="/ms/"><button>Bahasa Malaysia</button></a> <a href="/my/"><button>မြန်မာ</button></a> <a href="/vi/"><button>Tiếng Việt</button></a> <a href="/th/"><button>ภาษาไทย</button></a> <a href="/lo/"><button>ລາວ</button></a> <a href="/id/"><button>Bahasa Indonesia</button></a> <a href="/ur/"><button>اردو</button></a> <a href="/ha/"><button>Hausa</button></a> <a href="/pl/"><button>Język polski</button></a> <a href="/pa/"><button>ਪੰਜਾਬੀ</button></a> <a href="/sv/"><button>Svenska</button></a> <a href="/da/"><button>Dansk</button></a> <a href="/nl/"><button>Nederlands</button></a> <a href="/tr/"><button>Türkçe</button></a> <a href="/fi/"><button>suom.</button></a> <a href="/el/"><button>Ελληνικά</button></a> <a href="/fa/"><button>فارسی</button></a> <a href="/sw/"><button>Kiswahili</button></a> <a href="/te/"><button>తెలుగు</button></a> <a href="/tl/"><button>wikang Galu</button></a> </div> <h1>Matukio ya ondrag</h1> <div class="btn-toref"> <a href="/sw/jsref/dom_obj_event.html" title="Matukio ya HTML DOM">Matukio ya DOM</a> <a href="/sw/jsref/obj_dragevent.html" title="HTML DOM DragEvent">DragEvent</a> </div> <div> <h2>定义和用法</h2> <p>ondrag 事件在元素或文本选择被拖动时发生。</p> <p>拖放是 HTML5 中非常常见的功能。就是当您“抓取”一个对象并将其拖动到不同位置时。如需学习更多知识，请阅读我们关于 <a href="/sw/html/html5_draganddrop.html" title="HTML5 kusafiri">HTML5 kusafiri</a>的 HTML 教程。</p> <p class="note"><span>Matokeo:</span>如需使元素可拖动，请使用全局 <a href="/sw/tags/att_global_draggable.html" title="Majukuu ya HTML draggable">HTML5 draggable 属性</a>.</p> <p class="tip"><span>提示：</span>默认情况下，链接和图像是可拖动的，不需要 draggable 属性。</p> <p>在拖放操作的不同阶段，有许多事件被使用，并且可能发生：</p> <p>在可拖动目标（源元素）上触发的事件：</p> <ul> <li><a href="/sw/jsref/event_ondragstart.html" title="Matukio ya ondragstart">ondragstart</a> - 当用户开始拖动元素时发生</li> <li><a href="/sw/jsref/event_ondrag.html" title="Matukio ya ondrag">ondrag</a> - 当元素被拖动时发生</li> <li><a href="/sw/jsref/event_ondragend.html" title="Matukio ya ondragend">ondragend</a> - 当用户完成拖动元素时发生</li> </ul> <p>在放置目标上触发的事件：</p> <ul> <li><a href="/sw/jsref/event_ondragenter.html" title="Matukio ya ondragenter">ondragenter</a> - 当被拖动的元素进入放置目标时发生</li> <li><a href="/sw/jsref/event_ondragover.html" title="Matukio ya ondragover">ondragover</a> - 当被拖动的元素在放置目标上时发生</li> <li><a href="/sw/jsref/event_ondragleave.html" title="Matukio ya ondragleave">ondragleave</a> - 当被拖动的元素离开放置目标时发生</li> <li><a href="/sw/jsref/event_ondrop.html" title="Matukio ya ondrop">ondrop</a> - 当被拖动的元素被放在放置目标上时发生</li> </ul> <p class="note"><span>Matokeo:</span>Kwenye uondoa element, heshima ya ondrag inatoa kila 350 ms.</p> </div> <div> <h2>Mifano</h2> <p>Washindwa kufanya JavaScript wakati uondoa <p> element:</p> <pre class="language-html"> <p draggable="true" ondrag="myFunction(event)">Drag me!</p> </pre> <p class="tiy"><a target="_blank" href="/sw/tiy/t.html?f=event_ondrag">Tenda kwa kufikia</a></p> <p>Hapo chini kuna mifano mingi ya TIY.</p> </div> <div> <h2>Majadiliano</h2> <p>Kwenye HTML:</p> <pre class="language-html"> <<i>element</i> ondrag="<i>myScript</i>"> </pre> <p class="tiy"><a target="_blank" href="/sw/tiy/t.html?f=event_ondrag_html">Tenda kwa kufikia</a></p> <p>Kwenye JavaScript:</p> <pre class="language-js"> <i>object</i>.ondrag = function(){<i>myScript</i>}; </pre> <p class="tiy"><a target="_blank" href="/sw/tiy/t.html?f=event_ondrag_dom">Tenda kwa kufikia</a></p> <p>Kwenye JavaScript, tumia methodi addEventListener():</p> <pre class="language-js"> <i>object</i>.addEventListener("drag", <i>myScript</i>); </pre> <p class="tiy"><a target="_blank" href="/sw/tiy/t.html?f=event_ondrag_addeventlistener">Tenda kwa kufikia</a></p> <p class="note"><span>Matokeo:</span>Internet Explorer 8 au mwanzo wa msingi haukuwa na mpangilio <a href="/sw/jsref/met_element_addeventlistener.html" title="Method ya HTML DOM addEventListener()">addEventListener() method</a>.</p> </div> <div> <h2>Maelezo ya mteknolojia</h2> <table class="definition-usage"> <tr> <th>Inakatalia:</th> <td>Inaonesha</td> </tr> <tr> <th>Inafaidika:</th> <td>Inaonesha</td> </tr> <tr> <th>Aina ya matukio:</th> <td><a href="/sw/jsref/obj_dragevent.html" title="HTML DOM DragEvent">DragEvent</a></td> </tr> <tr> <th>Vitambulasho vya HTML vilivyo na msaada:</th> <td>Vilelele vya HTML zote</td> </tr> <tr> <th style="width: 25%;">DOM Version:</th> <td>Matukio ya Kiwango 3</td> </tr> </table> </div> <div> <h2>Makampuni ya kibali</h2> <p>Inaonyesha kufikirika cha kwanza cha kusukuma kwa browser kina inayosimamia matukio haya.</p> <table class="browser-support"> <tr> <th class="bsTh">matukio</th> <th class="bsChrome">Chrome</th> <th class="bsIE">IE</th> <th class="bsFirefox">Firefox</th> <th class="bsSafari">Safari</th> <th class="bsOpera">Opera</th> </tr> <tr> <td>ondrag</td> <td>4.0</td> <td>9.0</td> <td>3.5</td> <td>6.0</td> <td>12.0</td> </tr> </table> </div> <div> <h2>Mafanikio mengi</h2> <p>Tukio za kuingia kwa kusababisha zote za kufikirika zilizopatikana:</p> <pre class="language-html"> <p draggable="true" id="dragtarget">Angalia nani!</p> <div class="droptarget">Angalia hapa!</div> <script> /* ----------------- Matokeo ya matukio ya kuingia kwa kusababisha kwenye kipakuo cha kuingia kwa kusababisha ----------------- */ document.addEventListener("dragstart", function(event) { // dataTransfer.setData() method kumteua aina ya data na thamani ya data ya element iliyotumika kuingia kwa kusababisha event.dataTransfer.setData("Text", event.target.id); // Kamilifu kuingia kwa kusababisha p element kisha kichukua macho document.getElementById("demo").innerHTML = "Kuanza kuingia kwa kusababisha p element."; // Kamilifu kuingia kwa kusababisha p element kisha kubadilisha viwango vya kina event.target.style.opacity = "0.4"; }); // Kamilifu kuingia kwa kusababisha p element kisha kubadilisha rangi ya macho ya chapa document.addEventListener("drag", function(event) { document.getElementById("demo").style.color = "red"; }); // Kamilifu kuingia kwa kusababisha p element kisha kichukua macho na kusimamia kifupi cha viwango document.addEventListener("dragend", function(event) { document.getElementById("demo").innerHTML = "Kamilifu kuingia kwa kusababisha p element."; event.target.style.opacity = "1"; }); /* ----------------- Hatua inayotokea katika mifano wa upelekeshaji ----------------- */ // Ikiwa p elementi inayotoka inakufikia droptarget, kuingiza rangia ya DIV document.addEventListener("dragenter", function(event) { if ( event.target.className == "droptarget" ) { event.target.style.border = "3px dotted red"; } }); // Kwa msingi, haikubaliani kuingiza data/elementi kwenye mifano mengine. Kupinga hatua ya msingi, lazima nitaezuia hatua ya elementi document.addEventListener("dragover", function(event) { event.preventDefault(); }); // Ikiwa p elementi inayotoka inakufikia droptarget, kuingiza ujao wa DIV document.addEventListener("dragleave", function(event) { if ( event.target.className == "droptarget" ) { event.target.style.border = ""; } }); /* On drop - Kupunguza hatua ya msingi wa mifano (inaingizwa kama muungano wa kina kina kina) Kuondoa rangia ya matukio na ujao wa DIV Pakua data inayotoka kwa kutumia method ya dataTransfer.getData() Data inaitwa kwa kutoka elementi inayotoka id ("drag1") Inaingia kina kina kina elementi inayotoka */ document.addEventListener("drop", function(event) { event.preventDefault(); if ( event.target.className == "droptarget" ) { document.getElementById("demo").style.color = ""; event.target.style.border = ""; var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); } }); </script> </pre> <p class="tiy"><a target="_blank" href="/sw/tiy/t.html?f=event_ondrag_all">Tenda kwa kufikia</a></p> </div> <div> <h2>Mawasiliano ya hali</h2> <p>HTML Mafunzo:<a href="/sw/html/html5_draganddrop.html" title="HTML5 kusafiri">HTML5 kusafiri</a></p> <p>Kitabu cha mifano cha HTML:<a href="/sw/tags/att_global_draggable.html" title="Majukuu ya HTML draggable">Majukuu ya HTML draggable</a></p> </div> <div class="btn-toref"> <a href="/sw/jsref/dom_obj_event.html" title="Matukio ya HTML DOM">Matukio ya DOM</a> <a href="/sw/jsref/obj_dragevent.html" title="HTML DOM DragEvent">DragEvent</a> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div>  <div id="sidebar"> <div><h3><center> Kifurushi cha vifaa </center><h3> <h5 id="tools_reference"><a href="/sw/jsref/index.html">Mshauri wa JavaScript na HTML DOM wa Tazamani</a></h5> <h5 id="tools_example"><a href="/sw/js/js_examples.html">Mifano ya JavaScript</a></h5> <h5 id="tools_quiz"><a href="/sw/js/js_quiz.html">Imitindo ya JavaScript</a></h5> <h5 id="tools_tutorial"><a href="/sw/js/index.html">Mafunzo ya JavaScript</a></h5> </div> <div><h3><center> Vituo vya msaada </center><h3> <div id="sbtg"> <script src="/myjs/zzsr.js"></script> </div> </div> </div> <div id="footer"> <p id="p1"> Matokeo ya CodeW3C.com inatumiwa kwa mafunzo na michezo, hufikia hatua ya uharibifu wa matokeo. Hatarisha kwamba matokeo ina uwezo. Hatarisha kwamba matokeo ya mawasiliano yana uharibifu na tovuti haina uhusiano. Hisia zote, hisia zote. </p> <p id="p2"> <a href="/sw/about/index.html" title="Kuhusu CodeW3C.com">Kuhusu CodeW3C.com</a> <a href="/sw/about/about_helping.html" title="Msaada cha CodeW3C.com">Msaada cha CodeW3C.com</a> <a href="/sw/about/about_use.html" title="Kuhusu kutumia">Hufuati ya kutumia</a> <a href="/sw/about/about_privacy.html" title="Kuhusu hufuati">Hufuati ya hufuati</a> <a href="http://www.comfortsoftwaregroup.com/" target="_blank"><img src="/comfortsoftwaregroup.png"></a> <a href="http://www.ce4e.com/" target="_blank"><img src="/poweredby.png" alt="Inaripwa na Ce4e.com"></a> </p> </div> </div>  <script src="/myjs/tongji.js"></script> </body> </html>