ホームページ >ウェブフロントエンド >htmlチュートリアル >専門家がこのコードを変更して IE6/IE7_html/css_WEB-ITnose をサポートしてください。
専門家がこのコードを変更して IE6/IE7_html/css_WEB-ITnose をサポートしてください。
- WBOYオリジナル
- 2016-06-24 12:15:18886ブラウズ
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>HTML5 javascript 简单拖拽代码示例</title><script language="javascript">function DraggAble(obj){ obj.draggable = true; this.drag_start = function(e) { e.dataTransfer.effectAllowed='move'; e.dataTransfer.dropEffect='move'; e.dataTransfer.setData("Text", e.target.getAttribute('id')); e.dataTransfer.setDragImage(e.target,0,0); return true; } obj.ondragstart = this.drag_start;}function DropAble(obj){ obj.draggable = true; this.drag_drop = function(e){ e.target.appendChild(document.getElementById(e.dataTransfer.getData('Text'))); return false; } this.drag_over = function(e){ return false; } obj.ondrop = this.drag_drop; obj.ondragover = this.drag_over;}</script></head><body> <div style="width:200px; height:200px; background-color:#CC33CC; float:left" id="box4" ondrop="alert(1)" > 主区域<div style="width:100px; height:100px; background-color:#09F;" id="obj" ondrop="alert(1)" > 可以把我拖拽到不同的区域哦！ </div> </div> <div style="width:200px; height:200px; background-color:#CCC; float:left" id="box1" ondrop="alert(1)" > 区域1 </div> <div style="width:200px; height:200px; background-color:#F00; float:left" id="box2" ondrop="alert(1)" > 区域2 </div> <div style="width:200px; height:200px; background-color:#666; float:left" id="box3" ondrop="alert(1)" > 区域3 </div><script language="javascript">DraggAble(document.getElementById("obj"));DropAble(document.getElementById("box1"));DropAble(document.getElementById("box2"));DropAble(document.getElementById("box3"));DropAble(document.getElementById("box4"));</script></body></html> 現在、このコードは Firefox と Google Chrome をサポートしていますが、IE Core ブラウザとは互換性がありません。
ディスカッションへの返信 (解決策)
Jquery ui にはドラッグ アンド ドロップ機能もあります。これはドラッグ アンド ドロップできますが、直接植字には不便です。あるいは、微調整または自動の方法を提供できますか。ドラッグ後の位置合わせは？
タイトルが曖昧です、ごめんなさい！
現在、IE はサポートされていません。IE6 と IE7 をサポートするように変更できることを願っています
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。