Mafunzo ya CodeW3C ya Kijumla
  • Mafunzo ya HTML ya Kusenziwa
  • Mshairi wa mbinu wa mtafiti
  • Mshairi wa mbinu wa mawingu
  • Mafunzo ya Kifungu cha Kifungu
  • Mafunzo ya XML ya Kusenziwa
  • Makala ya Kureja Tovuti
  • Makala ya Kuelewa

Kati ya masomo

Kigezo cha JS

  • Kigezo cha JS (uruhuhu wa kikundi)
  • Kigezo cha JS (uruhuhu wa herufi)

JavaScript

  • JS Array
  • JS Boolean
  • JS Class
  • JS Tarehe
  • JS Kosa
  • JS Jumuia
  • JS JSON
  • JS Map
  • JS Math
  • JS Number
  • JS Promise
  • JS RegExp
  • JS Set
  • JS mawili
  • JS kipengeo
  • MS ya kifaa cha JS
  • MS ya kifaa cha kufaa cha JS
  • JS maelezo
  • JS tipengeo ya vifikia

Window

  • Kifungu cha Window
  • Window Console
  • Window History
  • Window Location
  • Window Navigator
  • Window Screen

HTML DOM

  • HTML Document
  • HTML Element
  • HTML Attribute
  • HTML Event
  • HTML Event kipengeo
  • HTML Collection
  • HTML NodeList
  • HTML DOMTokenList
  • HTML Style

Web API

  • API Canvas
  • API Console
  • API Fetch
  • API Fullscreen
  • API Geolocation
  • API History
  • API MediaQueryList
  • API Storage
  • API Validation
  • API Web

HTML kipengeo

  • <a>
  • <abbr>
  • <address>
  • <area>
  • <article>
  • <aside>
  • <audio>
  • <b>
  • <base>
  • <bdo>
  • <blockquote>
  • <body>
  • <br>
  • <button>
  • <canvas>
  • <caption>
  • <cite>
  • <code>
  • <col>
  • <colgroup>
  • <datalist>
  • <dd>
  • <del>
  • <details>
  • <dfn>
  • <dialog>
  • <div>
  • <dl>
  • <dt>
  • <em>
  • <embed>
  • <fieldset>
  • <figcaption>
  • <figure>
  • <footer>
  • <form>
  • <head>
  • <header>
  • <h1> - <h6>
  • <hr>
  • <html>
  • <i>
  • <iframe>
  • <img>
  • <ins>
  • <input> button
  • <input> checkbox
  • <input> color
  • <input> date
  • <input> datetime
  • <input> datetime-local
  • <input> email
  • <input> file
  • <input> hidden
  • <input> image
  • <input> month
  • <input> number
  • <input> password
  • <input> radio
  • <input> range
  • <input> reset
  • <input> search
  • <input> submit
  • <input> text
  • <input> time
  • <input> url
  • <input> week
  • <kbd>
  • <label>
  • <legend>
  • <li>
  • <link>
  • <map>
  • <mark>
  • <menu>
  • <menuitem>
  • <meta>
  • <meter>
  • <nav>
  • <object>
  • <ol>
  • <optgroup>
  • <option>
  • <output>
  • <p>
  • <param>
  • <pre>
  • <progress>
  • <q>
  • <s>
  • <samp>
  • <script>
  • <section>
  • <select>
  • <small>
  • <source>
  • <span>
  • <strong>
  • <sub>
  • <summary>
  • <sup>
  • <table>
  • <tbody>
  • <td>
  • <tfoot>
  • <th>
  • <thead>
  • <tr>
  • <textarea>
  • </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 ujenzi wa uchukua mimea">JS 类型转换</a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/sw/howto/index.html" title="Kiaja ya CodeW3C.com">Kiaja ya 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 ondragleave</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>当可拖动元素或文本选择离开有效放置目标时，会发生 ondragleave 事件。</p> <p>ondragenter 和 ondragleave 事件可以帮助用户了解某个可拖动元素即将进入或离开放置目标。例如，可通过在可拖动元素进入放置目标时设置背景颜色，并在元素移出目标时移除颜色来完成。</p> <p>拖放是 HTML5 中非常常见的功能。就是当您“抓取”一个对象并将其拖动到不同位置时。如需学习更多知识，请阅读我们关于 <a href="/sw/html/html5_draganddrop.html" title="HTML5 kusaidia">HTML5 kusaidia</a>的 HTML 教程。</p> <p class="note"><span>Kueleza:</span>如需使元素可拖动，请使用全局 <a href="/sw/tags/att_global_draggable.html" title="Hisia HTML draggable">HTML5 draggable 属性</a>。</p> <p class="tip"><span>提示：</span>默认情况下，链接和图像是可拖动的，不需要 draggable 属性。</p> <p>Inaendelea kwenye viwango vya kutoa kwa kusaidia kwa sababu kuna matukio mengi yanayotumika na yanaweza kufikia:</p> <p>Matukio yanayotukia kwenye kipakuo kinachotumika kama kipakuo (elementi ya asili):</p> <ul> <li><a href="/sw/jsref/event_ondragstart.html" title="Matukio ya ondragstart">ondragstart</a> - Inaathirika kama mtumiaji anafikia uharibifu wa kutoa kipakuo</li> <li><a href="/sw/jsref/event_ondrag.html" title="Matukio ya ondrag">ondrag</a> - Inaathirika kama elementi inayotumika kama kipakuo inatumika kama kipakuo</li> <li><a href="/sw/jsref/event_ondragend.html" title="Matukio ya ondragend">ondragend</a> - Inaathirika kama mtumiaji anafikia uharibifu wa kutoa kipakuo</li> </ul> <p>Matukio yanayotukia kwenye kipakuo kina:</p> <ul> <li><a href="/sw/jsref/event_ondragenter.html" title="Matukio ya ondragenter">ondragenter</a> - Inaathirika kama elementi inayotumika kama kipakuo inaingia kwenye kipakuo</li> <li><a href="/sw/jsref/event_ondragover.html" title="Matukio ya ondragover">ondragover</a> - Inaathirika kama elementi inayotumika kama kipakuo inahitaji kufikia kipakuo</li> <li><a href="/sw/jsref/event_ondragleave.html" title="Matukio ya ondragleave">ondragleave</a> - Inaathirika kama elementi inayotumika kama kipakuo inaondoka kwenye kipakuo</li> <li><a href="/sw/jsref/event_ondrop.html" title="Matukio ya ondrop">ondrop</a> - Inaathirika kama elementi inayotumika kama kipakuo inahitaji kufikia kipakuo kina</li> </ul> </div> <div> <h2>Mfano</h2> <p>Kutumia JavaScript kwenye uharibifu wa kutoa kama ingia elementi inayotumika kama kipakuo:</p> <pre class="language-html"> <div ondragleave="myFunction(event)"></div> </pre> <p class="tiy"><a target="_blank" href="/sw/tiy/t.html?f=jsck_error_message">Jifunze kwa Urahusi</a></p> <p>Makini ya ukurasa kuna mifano mingi ya TIY.</p> </div> <div> <h2>Muundo</h2> <p>In HTML:</p> <pre class="language-html"> <<i>element</i> ondragleave="<i>myScript</i>"> </pre> <p class="tiy"><a target="_blank" href="/sw/tiy/t.html?f=jsck_error_message">Jifunze kwa Urahusi</a></p> <p>In JavaScript:</p> <pre class="language-js"> <i>object</i>.ondragleave = function(){<i>myScript</i>}; </pre> <p class="tiy"><a target="_blank" href="/sw/tiy/t.html?f=jsck_error_message">Jifunze kwa Urahusi</a></p> <p>In JavaScript, tumia methodi addEventListener():</p> <pre class="language-js"> <i>object</i>.addEventListener("dragleave", <i>myScript</i>); </pre> <p class="tiy"><a target="_blank" href="/sw/tiy/t.html?f=jsck_error_message">Jifunze kwa Urahusi</a></p> <p class="note"><span>Kueleza:</span>Internet Explorer 8 na kuzi na kwanza hau inafaa kusaidia <a href="/sw/jsref/met_element_addeventlistener.html" title="Method ya HTML DOM addEventListener()">Methodi addEventListener()</a>。</p> </div> <div> <h2>Maadili ya teknolojia</h2> <table class="definition-usage"> <tr> <th>Kubeba:</th> <td>Inafikia</td> </tr> <tr> <th>Inafikia:</th> <td>Haiwezi kufikia</td> </tr> <tr> <th>Type of event:</th> <td><a href="/sw/jsref/obj_dragevent.html" title="HTML DOM DragEvent">DragEvent</a></td> </tr> <tr> <th>HTML tags inayosaidia:</th> <td>Wote wa HTML elements</td> </tr> <tr> <th style="width: 25%;">DOM Version:</th> <td>Matukio ya Kiwango 3</td> </tr> </table> </div> <div> <h2>Matumizi ya browser</h2> <p>Mafanikio ya namba kwenye tabia inaangalika na browseri za kwanza zilizoongeza matukio hii.</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>ondragleave</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>Mfano</h2> <p>Mfano wa matokeo ya kusaidia na kusaidia:</p> <pre class="language-html"> <p draggable="true" id="dragtarget">Saidia nani!</p> <div class="droptarget">Weka hapa!</div> <script> /* ----------------- Matokeo ya matukio ya kusaidia kwenye matokeo ----------------- */ document.addEventListener("dragstart", function(event) { // dataTransfer.setData() methodu inasaidia kubadilisha aina na thamani ya data inayosaidia event.dataTransfer.setData("Text", event.target.id); // Kwenye kuanza kusaidia p element, kushafinje taarifa document.getElementById("demo").innerHTML = "Kuanza kusaidia p element."; // Kusaidia kubadilisha uwezo wa kufikia kwa elementi inayosaidia event.target.style.opacity = "0.4"; }); // Kwenye kusaidia p element, kushika rangi ya taarifa ya chapa document.addEventListener("drag", function(event) { document.getElementById("demo").style.color = "red"; }); // Kufikia kusaidia p element na kushafinje taarifa na kuregusha kivunja document.addEventListener("dragend", function(event) { document.getElementById("demo").innerHTML = "Mfanyikia kusaidia p element."; event.target.style.opacity = "1"; }); /* ----------------- Matukio yanayotolewa kwenye maelezo wa kufanyia ----------------- */ // Ili badilisha ukinga div kama elementi inayotumika inakaa kwenye droptarget document.addEventListener("dragenter", function(event) { if ( event.target.className == "droptarget" ) { event.target.style.border = "3px dotted red"; } }); // Kwa kawaida, hali ya kusafirisha inaweza kusafirishwa kwenye elementi nyingine. Ili kumfunza kusafirisha, lazima tupinga uendeshaji wa kawaida wa elementi document.addEventListener("dragover", function(event) { event.preventDefault(); }); // Ili kirejeza ukinga div kama itakayopata kwenda droptarget document.addEventListener("dragleave", function(event) { if ( event.target.className == "droptarget" ) { event.target.style.border = ""; } }); /* On drop - Kupunguza uendeshaji wa data wa kawaida wa mtangazaji (inaendelea kuwa muungano kama kiungo kwa kufanyia upelekezo kwenye rangi mbili) Kirejeza rangi ya maandiko na div ya ukinga rangi Pika data inayotumika kwa mtindo dataTransfer.getData() Data inayotumika ni id ya elementi inayotumika ("drag1") Ingeongeza elementi inayotumika katika elementi ya kufanyia */ 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">Jifunze kwa Urahusi</a></p> </div> <div> <h2>Sayari ya Maandiko</h2> <p><a href="/sw/html/html5_draganddrop.html" title="HTML5 kusaidia">Mafunzo wa HTML: Drag and Drop katika HTML5</a></p> <p><a href="/sw/tags/att_global_draggable.html" title="Hisia HTML draggable">HTML Mshauri wa Maonyesho: Hisiau HTML</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> <!-- maincontent end --> <div id="sidebar"> <div><h3><center> Kifaa cha kila siku </center><h3> <h5 id="tools_reference"><a href="/sw/jsref/index.html">Makala ya Kuelewa ya JavaScript na HTML DOM</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">Majadiliano 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 mchakato, hatuwa hatarisha kwamba matokeo hii ni sahihi. Risiko ambalo linaingia kwa kutumia matokeo hii haukuchukuliwa na tovuti hii. Hisia yote inahifadhiwa, hata kwa uadilifu. </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 wa CodeW3C.com">Msaada wa CodeW3C.com</a> <a href="/sw/about/about_use.html" title="Kuhusu kutumia">Mshahara wa kutumia</a> <a href="/sw/about/about_privacy.html" title="Kuhusu habari ya隐私">Mshahara wa habari ya隐私</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="Inarifuwa na Ce4e.com"></a> </p> </div> </div> <!-- wrapper end --> <script src="/myjs/tongji.js"></script> </body> </html>