• 首页
• 服务器租用
• 企业邮箱
• 虚拟主机
• 网站程序
• 营销推广
• 网站建设
• 域名注册
• 前端开发
• 网站备案

• 当前位置：创新互联 >> 常见问题 >> 网站建设 >> 网站制作 >> 随意拖动的图片

随意拖动的图片

• 作者：创新互联 文章来源：网站建设部 点击数： 更新时间：2009-05-28
• 　　在某些电子商务网站上，大家经常会见到把商品用鼠标直接拖拽到购物车中的情形。而在某些在线游戏网站，大家也偶尔还会玩一些拼图游戏等。那么这些网站到底是怎么做呢？大家想知道的话，就跟随成都创新互联网站建设的小编一起来看看吧。
  　　其实这些效果是可以用Dreamweaver来实现的。这些使用鼠标拖拽对象的行为在Dreamweaver中就称之为DragLayer。使用这个动作的时候，可以规定浏览者用鼠标拖拽对象的方向，浏览者要将对象拖动到的那个目标，并且，如果这个对象处于目标周围一定的坐标范围内，还可以自动地依附到目标上。更神奇的是，当对象到达目标时，可以规定将要发生的事情。
  是不是很神奇呢？下面小编就讲解一下使用DragLayer动作的全过程。
  
  　　首先，选择工具面板中的层按钮，插入一个新层，并在层中插入一个对象。确保不选中这一层，然后点击行为面板中的+号，从中选择DragLayer，将弹出对话框。这个对话框有两个标签，分别是Basic和Advanced。
  
  在标签Basic中，作如下设置：
  1、选定将要被拖拽的层名称。
  2、Movement：它有两个选项，Unconstrained和Constrained。前者的意思是用户的鼠标拖拽不受任何限制。如果选择后者，则限制了鼠标拖拽的范围。通过在Up、down、left、right中键入坐标值，确定鼠标拖拽的区域。
  3、DropTarget：设定拖拽层的目标位置的坐标值。
  4、SnapIfWithin设定了可拖拽的那一层处于距离目标多远的范围内，如果在范围内，则自动依附到目标的位置上。
  
  　　其次，如果你还想在被拖拽的层到达一个目标后，导致某种行为的产生，比如，在购物网站中，将物品拖至购物车后，告知用户订购成功的信息。这种情况下，就需要设置DragLayer动作对话框中Advanced标签的内容。
  
  1、DragHandle：
  ①如果选择EntireLayer，则鼠标可以拖拽层的任何部位。
  ②如果选择Areawithinlayer则只有在这一层被设定范围内的部分可以导致鼠标拖拽动作的发生。这时，需要设置顶端、底端、左端、右端的位置值。
  2、Whiledragging：
  如果选中了这个复选框，在鼠标拖拽时，都将出现在所有层的最上方。
  3、Calljavascript：在鼠标拖拽层的过程中，可以调用javascript函数。比如，可以告诉浏览者一些诸如“你距离目的地还有多远”之类的信息。
  4、Whendropped：当鼠标拖拽层之后，释放层时，调用javascript。
  5、Onlyifsnapped：如果选中这项，则仅当层已经被拖拽到设定的目标位置时，才调用javascript函数。
  
  　　最后，大家按照上面讲解的各选项设置的用法以后，就可以轻松地按照每个人所希望的设置完成。而这时，在浏览器中打开页面，就可以欣赏到作品了。
• 自己制作紫色色调的素材 :上一篇
  什么网站算好站? :下一篇