[Ext JS 4] 拖放[drag and drop]

最新推荐文章于 2025-07-09 13:37:34 发布
最新推荐文章于 2025-07-09 13:37:34 发布
阅读量5.9k 收藏 2
点赞数 5
CC 4.0 BY-SA版权
分类专栏： 130-Web语言 Ext JS开发大全
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oscar999/article/details/9561883
本文详细介绍了如何在Ext JS 4中实现拖放功能，包括定义拖放、拖放类的组织以及具体实现步骤。通过示例展示了如何使轿车和卡车在不同状态间拖动，并使用DD和DDTarget创建拖放源和目标，以及添加动画效果和放置邀请，确保拖放操作的用户体验。

定义拖放

一个拖动操作，就是在某个页面元素上按下鼠标并移动。一个放下操作，就是在拖动动作之后放开鼠标。可以从下图来看：

Ext Drag and Drop

Ext JS 的Ext.dd 类中定义了基本的拖放操作。


拖放类的组织

所有的拖放类基本上都归类到Drag or  Drop 组中

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Ext JS 之拖拽Grid(Drag and Drop Grid)
oscar999的专栏
12-05 674
该插件会将特定的Ext.dd.DragZone和Ext.dd.DropZone实例附加到了Grid的View 上，DropZone是放置的区块，接收来自具有相同ddGroup的DragZone的拖放，包括来自同一网格内的拖放。在上面的示例中， 左边的Grid 既可以拖动到右边的Grid, 也可以在Grid 内部拖动， 如果要限定只能在Grid之间拖动，可以使用 dragGroup 和dropGroup。在放置操作的期间，将一个数据对象传递给参与的DropZone的drop处理程序。
强大的Extjs拖动示例
11-13
此功能实现手动配备大数据过滤sql条件，具有详细注释易懂，实现方式简单。可更具此基础上写成拖动表单。
EXT 控件拖动例子
04-09
EXTJS 控件拖动,动态布局例子
ExtJs----拖放
冲吧，不要停！
10-11 2474
先看最简单的拖放： 1new Ext.dd.DDProxy('block'); 2//对应的HTML部分代码 3div id="block" style="background:red;"> div>  拖放组件的体系     简单来说，左面4个组件都是可以随意拖动的。拖动起来后，直接把他们放到右面那些定义好的区域中。proxy表示可以拖动的对象，target表示拖
ExtJS 4 官方指南翻译：Drag and Drop 拖放
热门推荐
zhangxin09的专栏
10-26 1万+
原文：http://docs.sencha.com/ext-js/4-0/#!/guide/drag_and_drop 翻译：frank/sp42 转载请保留本页信息 拖放 Drag and Drop 在那么多的交互设计模式之中，“拖放（Drag andDrop）”模式可以说是开发者感觉比较不错的。用户日常在进行拖放操作的时候，真的是连“想都不用想”地就可以进行拖放操作了，非常直观而且易学易
ExtJS4官方指南翻译：DragandDrop拖放/Grid组件/Tree组件/容器与布局
07-25
在"ExtJS4官方指南翻译：DragandDrop拖放/Grid组件/Tree组件/容器与布局"中，我们将会探讨以下几个核心概念： 1. **Drag and Drop（拖放）**： ExtJS4提供了完善的拖放支持，允许用户通过鼠标操作在界面上移动元素...
19、Ext JS 拖放功能全解析
最新发布
rrr55的博客
07-09 60
本文全面解析了 Ext JS 的拖放功能，涵盖多目标交互、节点注册、主 - 详细布局实现、拖放组控制以及性能优化技巧。通过实际代码示例，深入讲解了如何使用 Ext.dd 相关类构建灵活的拖放系统，并探讨了抽象方法重写与配置选项的应用。适合希望提升复杂交互应用开发能力的 Ext JS 开发者。
drop and drag
11-01
在IT行业中，"Drop and Drag"（拖放）是一种用户界面技术，允许用户通过鼠标将一个元素从一处拖动到另一处，常用于文件管理、网页设计和图形用户界面的各种应用中。ExtJS是一个强大的JavaScript库，专为构建富客户端...
Extjs拖拽
常绍新的专栏
07-09 7866
最近项目前台使用Extjs实现，其中用到了Ext的Gridpanel的拖拽，现把相关内容总结，并写成一个例子。 本例子使用Extjs4.1的mvc模式实现。 第一步搭建程序架构 创建index.html文件，创建app.js文件，创建app/model、app/view、app/controller和app/store目录。 Index.html的很简单，内容如下： <!DOCTYP
Extjs 拖拽实例
xuanjiewu的专栏
02-09 325
Extjs 拖拽实例 body{ font-size:12px; margin:10px; } .item{ border:1px #000 solid; margin-right:10px; width:60px;...
extjs 可拖拽页面布局效果
08-13
extjs页面布局，可拖拽也可以根据你个人的需求，实现相关模块的显示和隐藏
基于ext的div拖动
05-12
1基于ext的div拖动 2数据库连接conn,可以自己创建
Ext拖动实例树和表格全 超实用
05-31
Ext拖动实例树和表格全 超实用
Ext实现数据拖拽功能
cpsl26415的博客
07-29 383
Ext实现数据拖拽功能，以下是代码[@more@]var comColumnCus = [{header : "客户编号",width : 70,sortable : true,dataIndex : 'custId'}, {h...
Extjs 实现元素标签拖拽
lingshuangcanxue
08-30 1392
新建 Demo.html 页面如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &am
ExtJs学习笔记(24)-Drag/Drop拖动功能
菩提树下的杨过
09-18 1755
 直接给代码吧，主要重点已经在代码里注释了 CodeCode highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w
ExtJS拖拽效果
dragonzoebai的专栏
12-08 1791
ExtJS拖拽效果
Extjs window组件 拖动统制
weixin_34256074的博客
07-17 226
Extjs window组件 拖动控制有时候一拖就拖出了浏览器，在想拖回来就不好办了：解决办法：参考以下代码，在加载Ext核心库以后执行：Ext.override(Ext.Window, {    constrain:true // 整个窗体都不能移出浏览器});或Ext.override(Ext.Window, {    constrainHeader:true // 窗体标题栏不能移出浏览器}...
解决ext对话框拖动时里头的控件会被蒙上，无法显示问题
lemon11231008的专栏
06-14 717
该效果为ExtJS默认效果。 Ext的window之所以在拖拽的时候里头的控件会被蒙上，是因为window继承了标准的DD，在startDrag和endDrag函数当中加上了Ext.Fx的ghost方法的缘故。Ext.Fx是管理元素的动画效果的，ghost方法的作用是滑动淡出，详细看手册。只要把这两句话改掉就能实现window拖动无蒙板。 在onReady函数前添加以下代码： Ext.over
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

oscar999

送以玫瑰，手留余香

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值