大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
如果要直接实现这种效果的话,
创新互联建站是一家集网站设计、做网站、网站页面设计、网站优化SEO优化为一体的专业网站设计公司,已为成都等多地近百家企业提供网站建设服务。追求良好的浏览体验,以探求精品塑造与理念升华,设计最适合用户的网站页面。 合作只是第一步,服务才是根本,我们始终坚持讲诚信,负责任的原则,为您进行细心、贴心、认真的服务,与众多客户在蓬勃发展的市场环境中,互促共生。
一个程序比较复杂,
第二个可能效果不会很理想,会出现很有拖拽或者运动中的bug!
你可以参考一下jquery ui里面的拖拽。
利用jquery ui里面的,即方便,有能有效的去除各种意料意外的情况
给你一个地址,你可以看一下参考一下
举例如下:
!-- 引入jQuery --
script src="../../scripts/jquery.js" type="text/JavaScript"/script
script type="text/javascript"
//![CDATA[
$(function(){
var $one_li = $("ul li:eq(1)"); // 获取ul节点中第二个li元素节点
var $two_li = $("ul li:eq(2)"); // 获取ul节点中第三个li元素节点
$two_li.insertBefore($one_li); //移动节点
});
//]]
/script
/head
body
p title="选择你最喜欢的水果." 你最喜欢的水果是?/p
ul
li title='苹果'苹果/li
li title='橘子'橘子/li
li title='菠萝'菠萝/li
/ul
单击是鼠标按下,抬起(click相当于mousedown+mouseup)
拖拽是鼠标按下,移动,抬起(mousedown+mousemove+mouseup)
jquery实现拖拽很简单的:
$(element).myDrag({
parent:'parent', //定义拖动不能超出的外框,拖动范围
randomPosition:true, //初始化随机位置
direction:'all', //方向
handler:false, //把手
dragStart:function(x,y){}, //拖动开始 x,y为当前坐标
dragEnd:function(x,y){}, //拖动停止 x,y为当前坐标
dragMove:function(x,y){} //拖动进行中 x,y为当前坐标
});
具体的可以看这里:jquery.drag.js—实现拖拽效果的插件
有完整的在线实例演示的!!!
[img]拖拽以及缩放需要有一个范围,姑且管这个叫舞台(stage)。另外,在舞台范围内,如何以一种简单的方式定义拖拽项?可以通过给div增加一个拖拽class(例如:resize-item),拖拽项应该是absolute布局,舞台是relative/absolute布局
所以拖拽类需要有如下两个参数
控制面板初始化的时候,应该是隐藏的,只有点击对应的拖拽项的时候才出现,并且点击舞台空白部分,需要隐藏控制面板(组织事件冒泡)
如果这篇文章对你有用,不妨点个赞
查看源码