怎么实现鼠标点到哪里图片就到哪里

实现华为T2000网管界面效果，鼠标左击图片，选中图片拖动到某个位置，然后释放鼠标，图片改变位置。
我需要在网页中显示出这种效果，怎么实现？

解决方案 »

  1.   

    这个实例 jquery ui包中的demo中就有的啊
      

  2.   

    js 鼠标事件大全
    事件        浏览器支持        描述onClick        IE3|N2|O        鼠标点击事件，多用在某个对象控制的范围内的鼠标点击onDblClick        IE4|N4|O        鼠标双击事件onMouseDown        IE4|N4|O        鼠标上的按钮被按下了onMouseUp        IE4|N4|O        鼠标按下后，松开时激发的事件onMouseOver        IE3|N2|O        当鼠标移动到某对象范围的上方时触发的事件onMouseMove        IE4|N4|O        鼠标移动时触发的事件onMouseOut        IE4|N3|O        当鼠标离开某对象范围时触发的事件onKeyPress        IE4|N4|O        当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]onKeyDown        IE4|N4|O        当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]onKeyUp        IE4|N4|O        当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]页面相关事件事件        浏览器支持        描述onAbort        IE4|N3|O3        图片在下载时被用户中断onBeforeUnload        IE4|N|O3        当前页面的内容将要被改变时触发的事件onError        IE4|N3|O3        捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误onLoad        IE3|N2|O3        页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成onMove        IE|N4|O        浏览器的窗口被移动时触发的事件onResize        IE4|N4|O        当浏览器的窗口大小被改变时触发的事件onScroll        IE4|N|O        浏览器的滚动条位置发生变化时触发的事件onStop        IE5|N|O        浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断onUnload        IE3|N2|O3        当前页面将被改变时触发的事件表单相关事件事件        浏览器支持        描述onBlur        IE3|N2|O3        当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可]onChange        IE3|N2|O3        当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]onFocus        IE3|N2|O3        当某个元素获得焦点时触发的事件onReset        IE4|N3|O3        当表单中RESET的属性被激发时触发的事件onSubmit        IE3|N2|O3        一个表单被递交时触发的事件滚动字幕事件事件        浏览器支持        描述onBounce        IE4|N|O        在Marquee内的内容移动至Marquee显示范围之外时触发的事件onFinish        IE4|N|O        当Marquee元素完成需要显示的内容后触发的事件onStart        IE4|N|O        当Marquee元素开始显示内容时触发的事件编辑事件事件        浏览器支持        描述onBeforeCopy        IE5|N|O        当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件onBeforeCut        IE5|N|O        当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件onBeforeEditFocus        IE5|N|O        当前元素将要进入编辑状态onBeforePaste        IE5|N|O        内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件onBeforeUpdate        IE5|N|O        当浏览者粘贴系统剪贴板中的内容时通知目标对象onContextMenu        IE5|N|O        当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的<body>中加入就可禁止使用鼠标右键了]onCopy        IE5|N|O        当页面当前的被选择内容被复制后触发的事件onCut        IE5|N|O        当页面当前的被选择内容被剪切时触发的事件onDrag        IE5|N|O        当某个对象被拖动时触发的事件 [活动事件]onDragDrop        IE|N4|O        一个外部对象被鼠标拖进当前窗口或者帧onDragEnd        IE5|N|O        当鼠标拖动结束时触发的事件，即鼠标的按钮被释放了onDragEnter        IE5|N|O        当对象被鼠标拖动的对象进入其容器范围内时触发的事件onDragLeave        IE5|N|O        当对象被鼠标拖动的对象离开其容器范围内时触发的事件onDragOver        IE5|N|O        当某被拖动的对象在另一对象容器范围内拖动时触发的事件onDragStart        IE4|N|O        当某对象将被拖动时触发的事件onDrop        IE5|N|O        在一个拖动过程中，释放鼠标键时触发的事件onLoseCapture        IE5|N|O        当元素失去鼠标移动所形成的选择焦点时触发的事件onPaste        IE5|N|O        当内容被粘贴时触发的事件onSelect        IE4|N|O        当文本内容被选择时的事件onSelectStart        IE4|N|O        当文本内容选择将开始发生时触发的事件数据绑定事件        浏览器支持        描述onAfterUpdate        IE4|N|O        当数据完成由数据源到对象的传送时触发的事件onCellChange        IE5|N|O        当数据来源发生变化时onDataAvailable        IE4|N|O        当数据接收完成时触发事件onDatasetChanged        IE4|N|O        数据在数据源发生变化时触发的事件onDatasetComplete        IE4|N|O        当来子数据源的全部有效数据读取完毕时触发的事件onErrorUpdate        IE4|N|O        当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件onRowEnter        IE5|N|O        当前数据源的数据发生变化并且有新的有效数据时触发的事件onRowExit        IE5|N|O        当前数据源的数据将要发生变化时触发的事件onRowsDelete        IE5|N|O        当前数据记录将被删除时触发的事件onRowsInserted        IE5|N|O        当前数据源将要插入新数据记录时触发的事件数据绑定事件        浏览器支持        描述onAfterPrint        IE5|N|O        当文档被打印后触发的事件onBeforePrint        IE5|N|O        当文档即将打印时触发的事件onFilterChange        IE4|N|O        当某个对象的滤镜效果发生变化时触发的事件onHelp        IE4|N|O        当浏览者按下F1或者浏览器的帮助选择时触发的事件onPropertyChange        IE5|N|O        当对象的属性之一发生变化时触发的事件onReadyStateChange        IE4|N|O        当对象的初始化属性值发生变化时触发的事件
      

  3.   

    好多现成能用的，如果楼主想自己写的话给你提供个思路。写js方法用计时器+鼠标事件+div移动想法：
    用onMouseDown来捕捉鼠标按下事件
    按下后用js计时器循环调用设定画像所在div的位置的函数
    timerID = setTimeout("setImagPositon()",100);用onMouseUp来捕捉鼠标释放事件
    鼠标释放后清除计时器
    clearTimeout(timerID);根据鼠标位置来设定div位置时要用到捕捉鼠标位置和设定div位置的方法，给你提供例子自己参考
    鼠标位置获取：
    http://www.codelifter.com/main/javascript/capturemouseposition1.html控制div移动：
    http://www.webapplikations.com/pages/html_js/document/SimpleVerticalDivScroll.html#
      

  4.   

    div，以前看到过这个东东，貌似是自己编辑自己的博客风格有这个功能的，网上应该有demo的，googel下div拖动
      

  5.   

    div层
    javascript方法move
    鼠标事件
    这些可以实现暖暖要求的效果