`
zhouyrt
  • 浏览: 1126462 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Javascript自由拖拽类

阅读更多

 

 

  基本拖拽

  new Dragdrop({

   target 拖拽元素 HTMLElemnt 必选

   bridge 指定鼠标按下哪个元素时开始拖拽,实现模态对话框时用到 

   dragable 是否可拖拽 (true)默认

dragX true/false false水平方向不可拖拽 (true)默认

   dragY true/false false垂直方向不可拖拽 (true)默认

area [minX,maxX,minY,maxY] 指定拖拽范围 默认任意拖动

  callback 拖拽过程中的回调函数

  });

 

 demo

  dragdrop_0.5.html

 

 

 效果图

 

拖拽效果图

 

  • 大小: 3.7 KB
4
1
分享到:
评论
3 楼 wenxiang_tune 2010-12-14  
我曾经用过,+prototype写起来非常舒服
2 楼 qinglintan 2010-09-14  
写的精采,但是不知项目中什么时候会用到。
1 楼 ldbjakyo 2010-09-14  
简而实用!

相关推荐

    基于vue20可自由拖拽自由调整大小收缩展开的panel组件

    基于 vue2.0 ,可自由拖拽、自由调整大小、收缩展开的 panel 组件

    浮动可拖动的窗口 javascript

    这是一个用javascript写的浮动可拖动的窗口,该窗口一方面可以自由飘动,还可以用鼠标托动。

    一个基于js实现的进行图片列表预览模式可自由拖动调整位置的源码例子

    一个基于js实现的进行图片列表预览模式可自由拖动调整位置的源码例子

    jQuery表单设计器自由拖拽特效.zip

    jQuery表单设计器自由拖拽特效.zip

    javascript实现拖动元素交换位置

    本文实例讲述了javascript实现拖动元素交换位置的代码。分享给大家供大家参考。具体如下: 实现目标:可拖动元素拖动到另外一个元素位置的时候,互相交换位置。 启发来源:最初形式是网上看到的一个拼图小游戏。 ...

    javascript弹出拖动窗口

    在很多网页上可以看到,点击网页的某个地方能够弹出一个新窗口,并且可以在屏幕中随意拖动,通过此篇文章给大家介绍javascript弹出拖动窗口,有需要的朋友可以参考下

    自由拖动层及层的放大缩小

    该资料包含了层的自由拖放和层的自由放大缩小。能有效的布局页面。

    DIY拖拽(二)

    用js实现了页面元素在页面自由拖拽而不会破坏网页结构 该方法是两种不同的方式实现了该功能,这是方法二实现的代码

    javascript网页特效实例大全

    6.6 可以随意拖动的图片 140 6.7 “雷达”扫描图片效果 142 6.8 图片的变形效果 143 6.9 会抖动的图片 144 6.10 不停闪烁的图片 146 6.11 图片分割显示 146 6.12 图片穿行页面效果 148 6.13 自由移动的图片 ...

    精通JavaScript+jQuery Part1

     15.3 Ajax实例:能够自由拖动布局区域的网页  第4部分 综合案例篇  第16章 我的博客   16.1 分析构架   16.2 模块拆分   16.3 整体调整   第17章 小型工作室网站   17.1 分析构架   17.2 ...

    JavaScript简单实现弹出拖拽窗口(二)

    接上文JavaScript简单实现弹出拖拽窗口(一)进行学习。  下面开始具体分析代码部分:  首先我们先确认下结构:  悬浮窗口:初始不可见。包括标题栏和内容栏,标题栏内有标题和关闭按钮。  遮罩层:初始不可见。...

    vue-draggable-div:vue可拖拽可伸缩的组件

    Vue可拖动的div 说明 vue可拖拽可伸缩的组件,目前只是上方,详见以下传送门 安装 npm install vue-draggable-div 使用 [removed] import VueDraggableDiv from 'vue-draggable-div' ... components: {...

    javascript 事件处理、鼠标拖动效果实现方法详解

    窗口: 代码如下: ”win”> ”win_header”></div> </div> 一点准备工作: 要让窗口能自由移动,那么窗口的定位(position)应该采用绝对定位(absolute); 给窗口添加标题栏,这里使用一个放在窗口顶部的层实现,...

    Javascript屏幕截图源代码

    功能: 基于web的实用屏幕截图工具,用于实现类似百度地图的截图功能,可自由拖动并对屏幕进行截图。 使用: 必须在页面body中设置一个最大的DIV,然后在config.js中设置设置该div的id。JDK1.5及其以上。源代码见附件...

    自定义拖拽(一)

    用js实现了页面元素在页面自由拖拽而不会破坏网页结构 该方法是两种不同的方式实现了该功能,这是方法一实现的代码

    javascript 实现自由落体的方块效果

    你可以试着按下鼠标左键,然后拖拽出一个方块后释放,看效果 Simple xhtml page div.container{ position:absolute; border:1px solid #333; font-size:0px; filter: alpha(opacity=60); opacity: 0.6; } ...

    blog.rar_ jsp blog_Java 8_jsp 图片_拖拽_文档管理

    7. 能够利用javascript脚本实现模块的拖拽,页面模块可以自由拖拽变换位置。 8. 注册用户可以读取已有评论,搜索已有评论,添加新评论。 9. 实现日历显示模块,其中包括时间、日期查询等功能。 10. 实现时钟模块、...

    drag-layout:基于React,可拖拽修改页面布局的插件

    拖动布局 概述 基于react完成的一个插件,拖拽修改页面布局。核心代码在src/drag_layout/index.js。 演示 下载后项目启动 # install dependencies npm install # Start the service npm run start # build for ...

    panel-drag:可拖拽、移动、自由大小菜单窗口。自由移动,缩放,拖拽,双击标题放大、缩小等功能

    可拖拽、移动、自由大小的菜单窗口,控制面板。自由移动,缩放,拖拽,双击标题放大、缩小等功能。 具体一下功能点: 1、标题双击(放大缩小) 2、点击标题移动 3、四边四角拖拉 4、面板尺寸大小提示 5、点击切换...

Global site tag (gtag.js) - Google Analytics