ondragend ਇਵੈਂਟ
ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ
ਜਦੋਂ ਯੂਜ਼ਰ ਅਣਗਿਣਤ ਤੱਕ ਖਿੜਾਈ ਗਈ ਅਣਗਿਣਤ ਜਾਂ ਟੈਕਸਟ ਚੋਣ ਖਿੜਾਈ ਗਈ ਹੈ ਤਾਂ ondragend ਈਵੈਂਟ ਪੈਦਾ ਹੁੰਦਾ ਹੈ。
ਖਿੜਾਈ ਹੈ HTML5 ਵਿੱਚ ਬਹੁਤ ਸਾਂਝਾ ਫੰਕਸ਼ਨ ਹੈ, ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਇੱਕ ਅਜਿਹੇ ਟੀਚੇ ਨੂੰ "ਗ੍ਰਿੱਪ" ਕਰਦੇ ਹੋ ਅਤੇ ਉਸ ਨੂੰ ਵੱਖਰੇ ਸਥਾਨ 'ਤੇ ਖਿੜਾਉਂਦੇ ਹੋ। ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ, ਸਾਡੇ ਬਾਰੇ ਪੜ੍ਹੋ HTML5 ਡ੍ਰੈਗ ਅਤੇ ਡ੍ਰੋਪਦੇ HTML ਸਿੱਖਿਆ ਮੰਚ
ਟਿੱਪਣੀਆਂ:ਜੇਕਰ ਤੁਸੀਂ ਇਲੈਕਟ੍ਰੌਨ ਖਿੜਾਈ ਯੋਗ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ, ਵਿਸ਼ਵਾਸਾਨਾ ਵਰਤੋਂ ਕਰੋ HTML5 draggable ਪ੍ਰਤੀਯੋਗਿਤਾ。
ਸੁਝਾਅ:ਮੂਲ ਰੂਪ ਵਿੱਚ, ਲਿੰਕ ਅਤੇ ਚਿੱਤਰ ਖਿੜਾਈ ਯੋਗ ਹਨ, draggable ਪ੍ਰਤੀਯੋਗਿਤਾ ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੁੰਦੀ
ਖਿੜਾਈ ਅਪਰੇਸ਼ਨ ਦੇ ਵੱਖ-ਵੱਖ ਪੜਾਵਾਂ 'ਚ, ਕਈ ਈਵੈਂਟ ਵਰਤੇ ਜਾਂਦੇ ਹਨ ਅਤੇ ਪੈਦਾ ਹੋ ਸਕਦੇ ਹਨ:
ਖਿੜਾਈ ਟੀਚੇ (ਸਰੋਤ ਤੱਤ) 'ਤੇ ਟ੍ਰਿਗਰ ਹੋਣ ਵਾਲੇ ਈਵੈਂਟ:
- ondragstart - ਜਦੋਂ ਯੂਜ਼ਰ ਅਣਗਿਣਤ ਖਿੜਾਉਣ ਲਈ ਪ੍ਰਯਾਸ ਕਰਦਾ ਹੈ ਤਾਂ ਪੈਦਾ ਹੁੰਦਾ ਹੈ
- ondrag - ਜਦੋਂ ਅਣਗਿਣਤ ਖਿੜਾਈ ਜਾ ਰਹੀ ਹੈ ਤਾਂ ਪੈਦਾ ਹੁੰਦਾ ਹੈ
- ondragend - ਜਦੋਂ ਯੂਜ਼ਰ ਅਣਗਿਣਤ ਖਿੜਾਉਣ ਲਈ ਪ੍ਰਯਾਸ ਕਰਦਾ ਹੈ ਤਾਂ ਪੈਦਾ ਹੁੰਦਾ ਹੈ
ਪਾਰਸਪਰਿਕ ਟੀਚੇ 'ਤੇ ਟ੍ਰਿਗਰ ਹੋਣ ਵਾਲੇ ਈਵੈਂਟ:
- ondragenter - ਜਦੋਂ ਖਿੜਾਈ ਗਈ ਅਣਗਿਣਤ ਪਾਰਸਪਰਿਕ ਟੀਚੇ ਵਿੱਚ ਪ੍ਰਵੇਸ਼ ਕਰਦੀ ਹੈ ਤਾਂ ਪੈਦਾ ਹੁੰਦਾ ਹੈ
- ondragover - ਜਦੋਂ ਖਿੜਾਈ ਗਈ ਅਣਗਿਣਤ ਪਾਰਸਪਰਿਕ ਟੀਚੇ ਉੱਤੇ ਹੈ ਤਾਂ ਪੈਦਾ ਹੁੰਦਾ ਹੈ
- ondragleave - ਜਦੋਂ ਖਿੜਾਈ ਗਈ ਅਣਗਿਣਤ ਪਾਰਸਪਰਿਕ ਟੀਚੇ ਤੋਂ ਬਾਹਰ ਚੱਲ ਜਾਂਦੀ ਹੈ ਤਾਂ ਪੈਦਾ ਹੁੰਦਾ ਹੈ
- ondrop - ਜਦੋਂ ਖਿੜਾਈ ਗਈ ਅਣਗਿਣਤ ਤੋਂ ਪਾਰਸਪਰਿਕ ਟੀਚੇ ਉੱਤੇ ਪਾਇਆ ਜਾਂਦਾ ਹੈ ਤਾਂ ਪੈਦਾ ਹੁੰਦਾ ਹੈ
ਉਦਾਹਰਨ
ਜਦੋਂ ਯੂਜ਼ਰ ਪੀ ਤੱਕ ਖਿੜਾਉਣ ਲਈ ਪ੍ਰਯਾਸ ਕਰਦਾ ਹੈ ਤਾਂ JavaScript ਚਲਾਉਣਾ:
<p draggable="true" ondragend="myFunction(event)">Drag me!</p>
ਪੰਨੇ ਦੇ ਨਾਲ ਹੋਰ TIY ਉਦਾਹਰਨ ਹਨ。
ਗਰੰਥ
ਜਿਵੇਂ ਕਿ HTML ਵਿੱਚ:
<element ondragend="myScript">
ਜਿਵੇਂ ਕਿ JavaScript ਵਿੱਚ:
object.ondragend = function(){myScript};
ਜਿਵੇਂ ਕਿ JavaScript ਵਿੱਚ ਵਰਤੋਂ ਕਰਨ ਲਈ addEventListener() ਮੈਥਡ:
object.addEventListener("dragend", myScript);
ਟਿੱਪਣੀਆਂ:ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 8 ਜਾਂ ਪੁਰਾਣੇ ਸਮੇਂ ਤੋਂ ਪਹਿਲਾਂ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ addEventListener() ਮੈਥਡ。
技术细节
冒泡: | 支持 |
---|---|
可取消: | 不支持 |
事件类型: | DragEvent |
支持的 HTML 标签: | 所有 HTML 元素 |
DOM 版本: | Level 3 Events |
浏览器支持
表中的数字注明了完全支持该事件的首个浏览器版本。
事件 | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
ondragend | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
更多实例
对所有可能的拖放事件的演示:
Drag me!
Drop here!