`
demojava
  • 浏览: 548965 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

【原创】jquery drage 插件

 
阅读更多



一个jquery drag 的插件

http://www.onextrapixel.com/examples/drag-and-drop-technique/drag-and-drop-technique.zip

这个太烂了。笔者测试发现。这个jquery 插件核心库 用jquery是1.3的版本当使用 jquery 1.4 core.js或者1.7.1.js发现官网的demo不动了。。什么反映也没有。一看代码做的挺不错的。就是代码多了写。

自己动手写一个吧。


css 使用的是 上面提供

支持 拖拽区域控制。轻量级插件4.07 KB

 

Demo 使用

 

 

$(document).ready( function(){
 $("#panel").drags({areaTo:"demo1",titleId:"panelTilte",enable:true,context:"panelContext",zIndex:"20"});
}); 

 

参数说明:

areaTo:控制拖拽区域dom id

 titleId:标题栏

enable:是否启用拖拽

context:内容面板对应的dom id

zIndex:dom 对应的 z-index

<!--模块拖拽-->
<div id="panel" class="dv1" >
    <h2 id="panelTilte" class="handler">Drag me</h2>
    <div id="panelContext" class="content">Yes, it is.</div>
</div>

 

 源码参见附件:

 

有bug 联系我 站内消息 email:fsm@test163.com
 

  • 大小: 1.1 KB
分享到:
评论

相关推荐

    jquery-文字拖放效果

    在实际项目中,除了基础的jQuery实现外,还可能存在一些预封装的拖放插件,如jQuery UI的`draggable`和`droppable`组件,它们提供了更完善的拖放功能,包括边界限制、吸附效果等。 在压缩包中的"公式demo"可能是...

    jquery 制作可拖拽的div实例

    在HTML文件(如`drage.html`或`test.html`)的`&lt;head&gt;`部分,添加以下代码来引用jQuery 1.8.2版本的最小化文件: ```html &lt;script src="jquery-1.8.2.min.js"&gt; ``` 接下来,我们需要选择要使其可拖动的div,并为其...

    selenium-mouse-drage-verify

    在IT行业中,自动化测试是确保软件质量的重要环节,而Selenium作为一款强大的Web应用程序测试工具,广泛应用于浏览器自动化。本文将深入探讨如何使用Selenium进行鼠标拖拽操作,并结合描述中的"模拟鼠标拖拽,网页...

    drageview 拖拽排序的view

    在Android开发中,实现用户界面元素的拖拽排序是一项常见的需求,这通常涉及到自定义View或者使用第三方库来实现。标题“drageview 拖拽排序的view”表明我们讨论的是一个允许用户通过拖动来改变视图元素顺序的功能...

    Goofy-Drage-Final:错误修复!

    在打开此页面用作扩展该存储库可以作为扩展添加到MakeCode中。... 打开 单击导入,然后单击导入URL 粘贴并单击导入方块预览此图显示了master中最后一次提交的块代码。 该图像可能需要几分钟才能刷新。...

    纯JS控制DIV选择范围移动与复制 改进版

    未选择状态下,单击DIV上可选中此DIV。 &lt;br&gt;未选择状态下,单击在背景上按住左键拖动产生范围虚线框,在此范围虚线框内的DIV边框变粗变色为被选中,虚线框外的则不被选中。 &lt;br&gt;已选择状态下,按住Ctrl可再次...

    protractor-firefox-support:在Firefox中使用Protractor进行e2e测试的Actions类函数的自定义实现

    量角器-Firefox支持这是在Firefox浏览器中使用Protractor框架进行e2e测试的类函数的自定义实现。 如果您使用它, :star: 它。安装您可以使用以下命令将其简单地安装到项目中: ...module.exports.performDnD = ({dragE

    EXCEL的导入导出

    DataColumn drAge = new DataColumn("Age", typeof(System.Int32)); dt.Columns.Add(drSno); dt.Columns.Add(drCno); dt.Columns.Add(drName); dt.Columns.Add(drAge); // 遍历Excel数据,插入到新创建的...

Global site tag (gtag.js) - Google Analytics