extjs 如何实现拖拽

Posted 2023-04-23

参考技术A 简单的extjs自带的例子里有，如果负责的需要你要自定义，给你给例子作为参考

需要实现两个drag、drog两个类
给你个例子参考
/*
*************************************************************************
*控制控件拖出
*
************************************************************************
*/
Ext.define('Mocoolka.ux.MKPanelDrag',
extend: 'Ext.dd.DragZone',

/**
* @Property mkdrag
* 如果组名指定,拖落发生在同组名之间，不同组名不能落
*/
ddGroup: 'mkdrag',
constructor: function () ,

/**
* @method init
* MKPanelDrag的构造方法，必须在panel渲染后调用
* @param Object panel 关联的panel
* @private
*/
init: function (panel)

if (panel.nodeType)
Mocoolka.ux.MKPanelDrag.superclass.init.apply(this, arguments);//调用祖类init

else
if (panel.rendered) //已渲染
Mocoolka.ux.MKPanelDrag.superclass.constructor.call(this, panel.getEl());//调用祖类构造方法
else //未渲染
panel.on('afterrender', this.init, this, single: true );//增加事件


,
/**
* @method afterDragOver
* 拖动完成后触发
* @param Object target panel落下的目标
* @private
*/
afterDragOver: function (target, e, id)

,
scroll: false,

/**
* @method afterDragOver
* 在鼠标按下时触发这个方法，判断目标是否可以拖动
* 如果可以拖动，收集可拖动对象的数据，返回包含我们指定数据的对象
* ddel属性是一个提供拖动对象视图的dom节点
* @param Object target panel落下的目标
* @private
*/
getDragData: function (e)

var t = e.getTarget(".button-draggable");//判断目标是否可以拖动

if (t)
e.stopEvent();

//Opera应急代码
if (Ext.isOpera)
Ext.fly(t.getEl()).on('mousemove', function (e1)
t.style.visibility = 'hidden';
Ext.defer(function ()
t.style.visibility = '';
, 1);
, null, single: true );


//得到目标对象,建立一个ddel
var f = Ext.getCmp(t.id);

var d = document.createElement('div');

d.className = 'x-form-text';
d.appendChild(document.createTextNode(f.text));
Ext.fly(d).setWidth(f.getEl().getWidth());
return
field: f,
ddel: d
;

,

/**
* @method getRepairXY
* 当落失败时，提供回到原来位置的坐标
* @private
*/
getRepairXY: function ()
return this.dragData.field.getEl().getXY();

);
/*
*************************************************************************
*编辑窗体拖动落区域控制
*
************************************************************************
*/
Ext.define('Mocoolka.ux.MKFieldDropZone',
extend: 'Ext.dd.DropZone',
xtype: 'MKFieldDropZone',
constructor: function (cfg)

cfg = cfg || ;

,
/**
* @method init
* MKFieldDropZone的构造方法，必须在panel渲染后调用
* @param Object panel 关联的panel
* @private
*/
init: function (panel)
var me = this;

if (panel.nodeType)

Mocoolka.ux.MKFieldDropZone.superclass.init.apply(this, arguments);
else
if (panel.rendered) //如果渲染

Mocoolka.ux.MKFieldDropZone.superclass.constructor.call(this, panel.getEl());//调用祖类构造方法
//控制控件不能选择
//var i = Ext.fly(panel.getEl()).select('input');
//i.unselectable();
//var i1 = Ext.fly(panel.getEl()).select('textarea');
//i1.unselectable();
else

panel.on('afterlayout', me.init, me, single: true );


,
/**
* @Property ddGroup
* 如果组名指定,拖落发生在同组名之间，不同组名不能落
*/
ddGroup: 'mkdrag',

/**
* @Property containerScroll
* 如果鼠标落在屏幕边缘，容器是否自动滚动
*/

containerScroll: true,
/**
* @method getTargetFromEvent
* 判断落下的目标，返回目标。这里的判断顺序是inpt、textarea、button-draggable、panel本身
* @param Object e 目标容器，包含多个
* @private
*/
getTargetFromEvent: function (e)

var me = this;

var panel = e.getTarget('input');

if (panel)
return panel;
var panel = e.getTarget('textarea');

if (panel)
return panel;
panel = e.getTarget('fieldset');
if (panel)
return panel;

panel = Ext.getCmp(this.id);
panel = panel.down('mkeditpanel');
if (panel)
return panel;

,

/**
* @method getTargetFromEvent
* 当拖动对象进入panel时触发这个方法，判断是否可以落下,如果可以落下，对落下目标加样式
* @param Object e 目标容器，包含多个
* @private
*/
onNodeEnter: function (target, dd, e, dragData)

delete this.dropOK;
if (!target)

return;


this.dropOK = true;

if (target.xtype == "mkeditpanel")

else
Ext.fly(target).addCls("mk-drop-target-active");


,

/**
* @method onNodeOver
* 当拖动对象在panel上时触发这个方法，返回是否能落下
* @param target e 目标容器，包含多个
* @private
*/
onNodeOver: function (target, dd, e, dragData)
return this.dropOK ? this.dropAllowed : this.dropNotAllowed;
,

/**
* @method onNodeOut
* 当拖动对象离开在panel上时触发这个方法,移除落目标样式
* @param target e 目标容器，包含多个
* @private
*/
onNodeOut: function (target, dd, e, dragData)

if (target.xtype == "mkeditpanel")

else
Ext.fly(target).removeCls('mk-drop-target-active');

,
/**
* @method onNodeOut
* 当拖动对象落下时触发这个方法,移除落目标样式
* @param target e 目标容器，包含多个
* @private
*/
onNodeDrop: function (target, dd, e, dragData)

dd.afterDragOver = function ()

;
var view;
if (dragData.view)
view = dragData.view;
else
view = dragData.field;
var view = view.up("mkdefineeditpanel");
var me = view.down("mkeditpanel");//得到设计船体对象

var panel = me;

if (this.dropOK) //如果可以落

var t = target;

if (t)

var end = true;
if (me.dragend == false)//是否放置在当前组件前
end = false;
e.stopEvent();

var iscolumn = false;
var field = null;
var sourcedata;

if (t.xtype == 'mkeditpanel') //如果目标是设计窗体


else //如果是输入组件



me.begintask();//重绘屏幕

return true;



return false;

,

onCellDrop: Ext.emptyFn
);本回答被提问者和网友采纳

如何使用jQuery Draggable和Droppable实现拖拽功能

参考技术A 给你提供一个拖拽的方法 function drag(id) var oDiv = $(id), disX = 0, disY = 0, _this = this; oDiv.mousedown(function(e) fnDown(e); ); function fnDown(e) var _this = this; disX = e.pageX - oDiv.offset().left; disY = e.pageY - oDiv.offset().top; $(document).mousemove(function (e) fnMove(e); ); $(document).mouseup(function () fnUp(); ); return false; function fnMove(e) var l = e.pageX - disX; var t = e.pageY - disY; if(l<0) l=0; else if(l>$(document).width()-oDiv.width()) l=$(document).width()-oDiv.width(); if(t<0) t=0; oDiv.css( 'position': 'absolute', 'left': l, 'top': t ); function fnUp() $(document).unbind('mousemove'); $(document).unbind('mouseup');