js实现鼠标拖拽div块释放鼠标打开文件

Question

左边一列导航栏，右面有个大的div块，想实现在导航栏中拖动div块到中间的div块中。鼠标将目标拖动到div中**释放鼠标打开导航栏的链接**应该怎么写？
新手小白在网上找了一些东西 看不懂这是我改后的代码

拖动放到此处

$(document).ready(function(){ $("#firstpane .menu_body:eq(0)").show(); $("#firstpane p.menu_head").click(function(){ $(this).addClass("current").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow"); $(this).siblings().removeClass("current"); }); $("#secondpane .menu_body:eq(0)").show(); $("#secondpane p.menu_head").mouseover(function(){ $(this).addClass("current").next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow"); $(this).siblings().removeClass("current"); }); }); <!--拖动--> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } <!-- ----- --> window.onload = function(){ var aLi = document.getElementsByTagName('img'); var aA = document.getElementsByTagName('a'); var oDiv = document.getElementById('center'); for(var i=0;i<aA.length;i++){ aA[i].ondragstart = function(ev){ //拖拽前触发 this.style.background = 'DarkKhaki'; // ev.dataTransfer.setData('a','hello'); //存储一个键值对 : value值必须是字符串 ev.dataTransfer.effectAllowed = 'link'; ev.dataTransfer.setDragImage(this,0,0); }; aA[i].ondragend = function(){ //拖拽结束触发 this.style.background = ''; //拖拽后颜色 }; } oDiv.ondragenter = function(){ //相当于onmouseover this.style.background = ''; //拖动时颜色 }; // oDiv.ondragleave = function(){ //相当于onmouseout // this.style.background = ''; // //}; oDiv.ondragover = function(ev){ //进入目标、离开目标之间，连续触发 ev.preventDefault(); //阻止默认事件：元素就可以释放了 ev.dataTransfer.dropEffect = 'link'; //真对外部文件 }; oDiv.ondrop = function(ev){ //释放鼠标的时候触发 this.style.background = 'Tan'; //释放后颜色 // window.location.href="" //document.getElementById("baidu").innerHTML }; };

现在主要的问题是 怎么在导航栏拖动div到中间后释放鼠标后在中间的div中打开导航栏所指向的本地.htm文件？求解

Answer 1

有些乱，，复制过来不知道怎么就成上面那样了。。。。