dom4j中能否通过节点的属性获得某个具体的节点?&root&&nodename="a"&&xml&1&/xml&&/node&&no
dom4j中能否通过节点的属性获得某个具体的节点?
&node name="a"&
&xml&1&/xml&
&node name="b"&
&xml&2&/xml&
&node name="c"&
&xml&3&/xml&
我想获得 node name="b" 的这个节点该怎么办？求各位大神帮忙解决下！！
public static void main(String[] args) {
SAXReader saxReader = new SAXReader();
document = saxReader.read(new File(Dom4j.class.getClass()
.getResource("/").getFile().toString()
+ "test.xml"));
Element root = document.getRootElement();
Element node = Dom4j.parse(root , "name" , "b");
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
* 获得X属性结果是X值的整个标签
public static Element parse(Element node , String type , String val) {
for (Iterator iter = node.elementIterator(); iter.hasNext();) {
Element element = (Element) iter.next();
Attribute name = element.attribute(type);
if (name != null) {
String value = name.getValue();
if (value != null && val.equals(value))
parse(element , type , val);
【云栖快讯】快速解决数据库难题，云数据库经典案例及最佳实践直播专场！阿里云数据库专家团队成员倾囊相授！赶紧报名。&&
为您提供简单高效、处理能力可弹性伸缩的计算服务，帮助您快速构建更稳定、安全的应用，提升运维效率，降低 IT 成本...
RDS是一种稳定可靠、可弹性伸缩的在线数据库服务。支持MySQL、SQL Server、PostgreSQL、高...js：异步的锅--&不能取到xml节点数 - 简书
js：异步的锅--&不能取到xml节点数
昨天用js解析xml时遇到一个奇怪的问题，使用console输出xml某个节点的节点数时，始终输出0，但是在console前面增加一个alert（）函数后，console可以正常输出节点数，而alert弹出的节点数却也是0。
下面是代码：
window.onload=function(){
var xml=loadXML("./test.xml");
alert(xml.getElementsByTagName("row").length);
console.log(xml.getElementsByTagName("row").length);
openNew(xml);
loadXML = function (xmlFile) {
if(window.ActiveXObject) {
xmlDoc =new ActiveXObject("microsoft.xmldom");
}else if (document.implementation && document.implementation.createDocument) {
xmlDoc = document.implementation.createDocument('','', null);
xmlDoc.load(xmlFile);
}catch(e){
return xmlD
alert弹出值
console输出值
原来是因为js异步执行导致xml还没有加载完成，程序就执行完console，所以在没有加alert时，console的输出是0。在loadXML（）中加入关闭异步的代码就行了。
之所以加入alert之后，console输出正常，是因为alert可以阻断js的执行，阻断的期间，xml已经加载完成。
加入关闭异步的位置：
loadXML = function (xmlFile) {
if(window.ActiveXObject) {
xmlDoc =new ActiveXObject("microsoft.xmldom");
}else if (document.implementation && document.implementation.createDocument) {
xmlDoc = document.implementation.createDocument('','', null);
xmlDoc.async =//关闭异步执行，让页面等待xmlDoc加载完毕，再继续执行
xmlDoc.load(xmlFile);
}catch(e){
return xmlD
我又在后面的用了一个1毫秒延时的定时器，发现加载还是很快的，1毫秒之内就xml加载完成了。
console.log(xml.getElementsByTagName("row").length);
setInterval(function(){
console.log(xml.getElementsByTagName("row").length);
Paste_Image.png记住登录一个月发表随想还能输入：200字该用户最新代码编程随想&by by by by by by [javascript]代码库 &script type="text/javascript"&
//&![CDATA[
$(function(){
var $para = $("p");
// 获取&p&节点
var $li = $("ul li:eq(1)");
// 获取第二个&li&元素节点
var p_txt = $para.attr("title"); // 输出&p&元素节点属性title
var ul_txt =
$li.attr("title"); // 获取&ul&里的第二个&li&元素节点的属性title
var li_txt =
$li.text();
// 输出第二个&li&元素节点的text
alert(ul_txt);
alert(li_txt);
alert(p_txt);
&p title="选择你最喜欢的水果." &你最喜欢的水果是?&/p&
&li title='苹果'&苹果&/li&
&li title='橘子'&橘子&/li&
&li title='菠萝'&菠萝&/li&
&/body&分享到：更多发表评论：评论须知：1、评论每次加2分，每天上限为30；2、请文明用语，共同创建干净的技术交流环境；3、若被发现提交非法信息，评论将会被删除，并且给予扣分处理，严重者给予封号处理；4、请勿发布广告信息或其他无关评论，否则将会删除评论并扣分，严重者给予封号处理。js获取和设置属性的方法
字体：[ ] 类型：转载 时间：
本篇文章主要是对js获取和设置属性的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
代码如下:function square(num){&&& var total = num*//局部变量&&&}var total = 50;//全局变量var number = square(20);alert(total);//结果为50
function square(num){&&& total = num*//全局变量&&&}var total = 50;//全局变量var number = square(20);alert(total);//结果为400这细微的差别就会影响到程序的结果 代码如下:body{&&& color:&&& background-color:}这些颜色不仅作用于那些直接包含在&body&标签里的内容，还将作用于嵌套在body元素内的所有元素
id属性就像一个挂钩，它一头连着文档里的某个元素，另一头连着CSS样式表里的某个样式
document.getElementById("purchases")这个调用将返回一个对象，这个对象对应着document对象里的一个独一无二的元素，那个元素的的id属性值为purchases
其实，文档中的每个元素都是一个对象。利用DOM提供的方法能够得到任何一个对象。
getElementsByTagName返回一个数组，即使整个文档里只有一个元素，也返回一个数组。
示例： 代码如下:var items = document.getElementsByTagName("li");for(var i = 0;i&items.i++){&&& alert(typeof items[i]);}显示信息都是object
getElementByClassName也返回一个具有相同类名的元素数组
获取和设置属性getAttributeobject.getAttribute(attribute)注：getAttribute方法不属于document对象，它只能通过元素节点对象调用。
setAttributeobject.setAttribute(attribute,value)
例子：var shopping = document.getElementById("purchases");shopping.setAttribute("title","a list of goods");
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具js读取xml节点完整文档内容 - 开源中国社区
当前访客身份：游客 [
当前位置：
发布于 日 9时,
js读取xml节点完整文档内容
代码片段(17)
test.rar&~&1KB&&&&
新建文本文档.html&~&3KB&&&&
&textarea id="ddd" style="width:600height:400"&
&/textarea&
&textarea id="ddd2" style="width:600height:400"&
&/textarea&
&div style="background-color:" id='footer'& wadrsad
&button onclick="get('dd',document.getElementById('ddd').innerText)"&ssss&/button&
// DIV代码根据id提取
function getCode(sid,str){
var regex3 = new RegExp("&div [^&]*sid=\""+sid+"\"[^&]*&(&div[^&]*&.*?&/div&|.|\n)*?&/div&","gi");
var groups = str.match(regex3);
if(groups){
return groups[0];
// 将当前拖动的sid1的元素添加到sid2元素中成为它(sid2)的子元素
function moveCodeTo(sid1,sid2,str){
var sid1str = get(sid1,str);
var sid2str = get(sid2,str);
// 将拖拽的代码appendTo到sid2中拼接成它的子元素
var lst_div = sid2str.toLowerCase().lastIndexOf("&/div&");
var sid2newstr = sid2str.substring(0,lst_div)+"\n"+sid1str+"\n&/div&";
// 删除sid1原来的代码
str = str.replace(sid1str,"");
// 将拼接的新sid2代码更新
str = str.replace(sid2str,sid2newstr);
// 更新元素绝对位置Style信息例position:left:99top:100
function upPosCode(sid,left,top,str){
var regex3 = new RegExp("&div [^&]*sid='"+sid+"' [^&]*&","gi");
var groups = str.match(upStr);
if(groups){
groups[0].replace(/position[\s]*:.*;/i,"");
groups[0].replace(/left[\s]*:.*;/i,"");
groups[0].replace(/top[\s]*:.*;/i,"");
var stylegp = groups[0].match(/style=".*"/i);
if(!stylegp){//当无style样式时，追加style
groups[0].replace(/&$/," style=\"position:left:"+left+";top:"+top+";\"&");
}else{//当有style样式时，追加style的postion属性
stylegp[0].replace(/"$/," position:left:"+left+";top:"+top+";\"");
var str = ""
+'&div id="dkk" class="wrap"&\n'
+'&/div&\n'
+'&div class="wrap"&\n'
+' &div id="dxy_logo"&\n'
&div id="logo_l"&'
&a href="http://www.jb51.net" title="脚本之家" target="_blank"&'
&img src="http://www.jb51.net/images/logo.gif" alt="脚本之家" /&&/a&'
&div id="logo_m"&&/div&\n'
&div id="logo_r"&&/div&\n'
+' &/div&&!--导航开始--&\n'
+'&/div&\n';
document.getElementById('ddd').innerText='';
document.getElementById('ddd').innerText=
document.getElementById('ddd2').innerText='';
&button onclick="document.getElementById('ddd2').innerText=getCode1('dxy_logo',str)"&getCode&/button&&br/&
&button onclick="document.getElementById('ddd2').innerText=moveCodeTo1('dxy_logo','dkk',str)"&moveCodeTo&/button&&br/&
&button onclick="document.getElementById('ddd2').innerText=upPosCode1('dxy_logo','20px','30px',str)"&upPosCode&/button&&br/&
新建文本文档.html&~&3KB&&&&
&textarea id="ddd" style="width:600height:400"&
&/textarea&
&textarea id="ddd2" style="width:600height:400"&
&/textarea&
&div style="background-color:" id='footer'& wadrsad
&button onclick="get('dd',document.getElementById('ddd').innerText)"&ssss&/button&
// DIV代码根据id提取
function getCode(sid,str){
var regex3 = new RegExp("&div [^&]*sid='"+sid+"'[^&]*&(&div[^&]*&.*?&/div&|.)*?&/div&","gi");
var groups = str.match(regex3);
if(groups){
return groups[0];
// 将当前拖动的sid1的元素添加到sid2元素中成为它(sid2)的子元素
function moveCodeTo(sid1,sid2,str){
var sid1str = get(sid1,str);
var sid2str = get(sid2,str);
// 将拖拽的代码appendTo到sid2中拼接成它的子元素
var lst_div = sid2str.toLowerCase().lastIndexOf("&/div&");
var sid2newstr = sid2str.substring(0,lst_div)+"\n"+sid1str+"\n&/div&";
// 删除sid1原来的代码
str = str.replace(sid1str,"");
// 将拼接的新sid2代码更新
str = str.replace(sid2str,sid2newstr);
// 更新元素绝对位置Style信息例position:left:99top:100
function upPosCode(sid,left,top,str){
var regex3 = new RegExp("&div [^&]*sid='"+sid+"' [^&]*&","gi");
var groups = str.match(upStr);
if(groups){
groups[0].replace(/position[\s]*:.*;/i,"");
groups[0].replace(/left[\s]*:.*;/i,"");
groups[0].replace(/top[\s]*:.*;/i,"");
var stylegp = groups[0].match(/style=".*"/i);
if(!stylegp){//当无style样式时，追加style
groups[0].replace(/&$/," style=\"position:left:"+left+";top:"+top+";\"&");
}else{//当有style样式时，追加style的postion属性
stylegp[0].replace(/"$/," position:left:"+left+";top:"+top+";\"");
var str = ""
+'&div sid="dkk" class="wrap"&&/div&\n'
+'&div class="wrap"&\n'
&div sid=\'dxy_logo\'&\n'
&div sid="logo_l"&\n'
&a href="http://www.jb51.net" title="sssss" target="_blank"&\n'
&img src="http://www.jb51.net/images/logo.gif" alt="ssss" /&&/a&\n'
&div sid="logo_m"&&/div&\n'
&div sid="logo_r"&&/div&\n'
&/div&&!--导航开始--&\n'
+'&/div&\n';
document.getElementById('ddd').innerText='';
document.getElementById('ddd').innerText=
document.getElementById('ddd2').innerText='';
&button onclick="document.getElementById('ddd2').innerText=getCode('dxy_logo',str)"&getCode&/button&&br/&
&button onclick="document.getElementById('ddd2').innerText=moveCodeTo('dxy_logo','dkk',str)"&moveCodeTo&/button&&br/&
&button onclick="document.getElementById('ddd2').innerText=upPosCode('dxy_logo','20px','30px',str)"&upPosCode&/button&&br/&
新建文本文档.html&~&3KB&&&&
&textarea id="ddd" style="width:600height:400"&
&/textarea&
&textarea id="ddd2" style="width:800height:400"&
&/textarea&
&div style="background-color:" id='footer'& wadrsad
&button onclick="get('dd',document.getElementById('ddd').innerText)"&ssss&/button&
// DIV代码根据id提取
function getCode(sid,str){
var regex3 = new RegExp("&div [^&]*sid=\""+sid+"\"[^&]*&(&div[^&]*&.*?&/div&|.)*?&/div&","gi");
alert(str.replace('\n','\r'));
var groups = str.replace(/\n/g,'\r').match(regex3);
if(groups){
return groups[0].replace(/\r/g,'\n');
// 将当前拖动的sid1的元素添加到sid2元素中成为它(sid2)的子元素
function moveCodeTo(sid1,sid2,str){
var sid1str = getCode(sid1,str);
var sid2str = getCode(sid2,str);
// 将拖拽的代码appendTo到sid2中拼接成它的子元素
var lst_div = sid2str.toLowerCase().lastIndexOf("&/div&");
var sid2newstr = sid2str.substring(0,lst_div)+"\n "+sid1str+"\n &/div&";
// 删除sid1原来的代码
str = str.replace(sid1str,"");
// 将拼接的新sid2代码更新
str = str.replace(sid2str,sid2newstr);
// 更新元素绝对位置Style信息例position:left:99top:100
function upPosCode(sid,left,top,str){
var regex3 = new RegExp("&div [^&]*sid=\""+sid+"\"[^&]*&","gi");
var groups = str.match(regex3);
var newgroup = groups[0];
if(groups){
newgroup = newgroup.replace(/position\s*:.*?;/i,"");
newgroup = newgroup.replace(/left\s*:.*?;/i,"");
newgroup = newgroup.replace(/top\s*:.*?;/i,"");
var stylegp = newgroup.match(/style=".*?"/i);
if(!stylegp){//当无style样式时，追加style
newgroup = newgroup.replace(/&$/," style=\"position:left:"+left+";top:"+top+";\"&");
//alert();
}else{//当有style样式时，追加style的postion属性
var newstyle = stylegp[0].replace(/"$/,"position:left:"+left+";top:"+top+";\"");
newgroup = newgroup.replace(stylegp,newstyle);
return str.replace(groups[0],newgroup);
var str = ""
+'&div sid="dkk" class="wrap"&&/div&\n'
+'&div class="wrap"&\n'
&div sid="dxy_logo"
style="adsad:position:left:210top:20"
asd="sdsd" &\n'
&div sid="logo_l"&\n'
&div sid="logo_l"&\n'
&div sid="logo_l" &\n'
&a href="http://www.jb51.net" title="sssss" target="_blank"&\n'
&img src="http://www.jb51.net/images/logo.gif" alt="ssss" /&&/a&\n'
&div sid="logo_m"&&/div&\n'
&div sid="logo_r"&&/div&\n'
+'&/div&';
document.getElementById('ddd').innerText='';
document.getElementById('ddd').innerText=
document.getElementById('ddd2').innerText='';
&button onclick="document.getElementById('ddd2').innerText=getCode('dxy_logo',str)"&getCode&/button&&br/&
&button onclick="document.getElementById('ddd2').innerText=moveCodeTo('dxy_logo','dkk',str)"&moveCodeTo&/button&&br/&
&button onclick="document.getElementById('ddd2').innerText=upPosCode('dxy_logo','210px','30px',str)"&upPosCode&/button&&br/&
easyui14.rar&~&697KB&&&&
easyui14.rar&~&698KB&&&&
addremove1.html&~&6KB&&&&
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&Add and Remove Layout - jQuery EasyUI Demo&/title&
&link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"&
&link rel="stylesheet" type="text/css" href="../../themes/icon.css"&
&link rel="stylesheet" type="text/css" href="../demo.css"&
&script type="text/javascript" src="../../jquery.min.js"&&/script&
&script type="text/javascript" src="../../jquery.easyui.min.js"&&/script&
&h2&Add and Remove Layout&/h2&
&p&Click the buttons below to add or remove region panel of layout.&/p&
&div class="easyui-tabs easyui-resizable" data-options="tabWidth:112" style="width:100%;height:"&
&div title="source" style="padding:10px"&
&p&Home Content.&/p&
&div title="design-mode" style="padding:5width:height:"&
&div id="cc" class="easyui-layout" style="width:height:700"&
&div data-options="region:'north'" style="height:30px"&&/div&
&div data-options="region:'south',split:true" style="height:50"&&/div&
&div data-options="region:'east',split:true" title="East" style="width:100"&&/div&
&div data-options="region:'west',split:true" title="West" style="width:150padding-left:2"&
&div style="position:width:115height:900 border:1px solid #top:20"&
&div class="dragitem" component_id="Panel" style="border:1px solid #width:110height:40"&Panel(可拖拽)&/div&
&div style="height: 5"&&/div&
&div class="dragitem" component_id="tree" style="border:1px solid #width:110height:40"&Tree(可拖拽)&/div&
&div style="height: 5"&&/div&
&div class="dragitem" component_id="datagrid" style="border:1px solid #width:110height:40"&DataGrid(可拖拽)&/div&
&div style="height: 5"&&/div&
&div class="dragitem" component_id="datebox" style="border:1px solid #width:110height:40"&datebox(可拖拽)&/div&
&div style="height: 5"&&/div&
&div class="dragitem" component_id="combobox" style="border:1px solid #width:110height:40"&combobox(可拖拽)&/div&
&div style="height: 5"&&/div&
&div class="dragitem" component_id="button" style="border:1px solid #width:110height:40"&button(可拖拽)&/div&
&div id="EditDiv" onclick="alert(event.srcElement.innerHTML)" style="position:border:1px solid #" data-options="region:'center',title:'EditDiv'"&
&script type="text/javascript"&
var proxy =var component_id = '';
$(function(){
$('.dragitem').draggable({
revert:true,
proxy:function(source){
var n = $('&div style="position:absolute"&&/div&');
component_id = $(source).attr('component_id');
var com = n.html($.ajax({url:component_id+".html",async:false}).responseText).appendTo('body');
$.parser.parse(com[0]);
return proxy=n;
onStopDrag:onProxStopDrag
function onProxStopDrag(e){
var DragScopes = $('#EditDiv .control').add($('#EditDiv'));
var parentdiv = findParentInScope(proxy[0],DragScopes);
if(parentdiv){
var n = $('&div style="position:border: 1px solid #ccc"&&/div&');
n.html($.ajax({url:component_id+".html",async:false}).responseText);
var ff = parentdiv.appendChild(n[0].firstChild);
$.parser.parse(ff);
ff.style.position = 'absolute';
ff.style.left = ($(proxy[0]).offset().left -
$(parentdiv).offset().left) + "px";
ff.style.top = ($(proxy[0]).offset().top -
$(parentdiv).offset().top) + "px";
* 开始拖拽组件边框变红,变层为最高层目的是不被其他组件遮挡住
function onStartDrag(e){
var d = e.
$(d.target).css("z-index","9999");
d.target.style.borderColor="red";
当停止拖拽的时候,判断是否拖拽组件或容器以及逃离了父容器的边界，
* 如果脱离，则选择到达的最小容器作为其新父容器
function onStopDrag(e){
var d = e.
$(d.target).css("z-index","0");
d.target.style.borderColor="#ccc";
$(d.target).parents(".easyui-draggable").draggable({disabled:false});
var EditDivs = $('#EditDiv div'); EditDivs.push($('#EditDiv')[0]);
var parentdiv = findParentInscope(proxy[0],EditDivs);
if(parentdiv){
d.target.style.left = ($(d.target).offset().left -
$(parentdiv).offset().left) + "px";
d.target.style.top = ($(d.target).offset().top -
$(parentdiv).offset().top) + "px";
var ff = parentdiv.appendChild(d.target);
* 返回最小包含父容器方法
* 查看target元素落在了什么容器范围之内,如果多个容器范围都包含它则取小的那一个容器.
* @target 拖动元素
* @containers 用于寻找是否位置包含拖动元素target位置的容器集合
* @return 返回最小(宽度最小)包含父容器
function findParentInScope(target,containers){
var parentdiv =
containers.each(function(){
if(target!=this){
if($(this).offset().left & $(target).offset().left)
if($(this).offset().left + $(this).width() & $(target).offset().left + $(target).outerWidth())
if($(this).offset().top & $(target).offset().top)
if(($(this).offset().top + $(this).height()) & ($(target).offset().top + $(target).outerHeight()))
if(parentdiv == null || $(this).width()&$(parentdiv).width()){
parentdiv =
* 判断鼠标按下位置的所有组件或容器，取宽度最小的那一个
function findParentInScope(left,top,containers){
var parentdiv =
containers.each(function(){
if(this!=target){
if( left & $(this).offset().left )
if( left & $(this).offset().left + $(this).width() )
if( top & $(this).offset().top )
if( top & $(this).offset().top + $(this).height() )
if( parentdiv == null || $(this).width()&$(parentdiv).width()){
parentdiv =
addremove1.rar&~&2KB&&&&
addremove11111.html&~&8KB&&&&
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&Add and Remove Layout - jQuery EasyUI Demo&/title&
&link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"&
&link rel="stylesheet" type="text/css" href="../../themes/icon.css"&
&link rel="stylesheet" type="text/css" href="../demo.css"&
&script type="text/javascript" src="../../jquery.min.js"&&/script&
&script type="text/javascript" src="../../jquery.easyui.min.js"&&/script&
&h2&Add and Remove Layout&/h2&
&p&Click the buttons below to add or remove region panel of layout.&/p&
&div class="easyui-tabs easyui-resizable" data-options="tabWidth:112" style="width:100%;height:"&
title="source" style="padding:10px"&
&textarea id="source" style="width:100%;height:800"&&/textarea&
&div title="design-mode" style="padding:5width:height:"&
&div id="cc" class="easyui-layout" style="width:height:700"&
&div data-options="region:'north'" style="height:30px"&&/div&
&div data-options="region:'south',split:true" style="height:50"&&/div&
&div data-options="region:'east',split:true" title="East" style="width:100"&&/div&
&div data-options="region:'west',split:true" title="West" style="width:150padding-left:2"&
&div style="position:width:115height:900 border:1px solid #top:20"&
&div class="dragitem" component_id="Panel" style="border:1px solid #width:110height:40"&Panel(可拖拽)&/div&
&div style="height: 5"&&/div&
&div class="dragitem" component_id="tree" style="border:1px solid #width:110height:40"&Tree(可拖拽)&/div&
&div style="height: 5"&&/div&
&div class="dragitem" component_id="datagrid" style="border:1px solid #width:110height:40"&DataGrid(可拖拽)&/div&
&div style="height: 5"&&/div&
&div class="dragitem" component_id="datebox" style="border:1px solid #width:110height:40"&datebox(可拖拽)&/div&
&div style="height: 5"&&/div&
&div class="dragitem" component_id="combobox" style="border:1px solid #width:110height:40"&combobox(可拖拽)&/div&
&div style="height: 5"&&/div&
&div class="dragitem" component_id="button" style="border:1px solid #width:110height:40"&button(可拖拽)&/div&
&div id="EditDiv" class="dragContainer" drag-options=".easyui-draggable" style="position:border:1px solid #" data-options="region:'center',title:'EditDiv'"&
&script type="text/javascript"&
var proxy =var component_id = '';var dragText = "";
$(function(){
// 初始化可拖拽代理区
$('.dragitem').draggable({
revert:true,
proxy:function(source){
var n = $('&div style="position:absolute"&&/div&');
component_id = $(source).attr('component_id');
var com = n.html(dragText = $.ajax({url:component_id+".html",async:false}).responseText).appendTo('body');
$.parser.parse(com[0]);
return proxy=n;
onStopDrag:function(e){
// 当代理拖拽停止时,将拖动的组件添加到编辑区
var DragScopes = $('#EditDiv .easyui-draggable').add($('#EditDiv'));
var parentdiv = findParentInScope(proxy[0],DragScopes);
if(parentdiv){
var n = $('&div style="position:border: 1px solid #ccc"&&/div&');
n.html(dragText);
var ff = parentdiv.appendChild(n[0].firstChild);
$.parser.parse(ff);
ff.style.position = 'absolute';
ff.style.left = ($(proxy[0]).offset().left -
$(parentdiv).offset().left) + "px";
ff.style.top = ($(proxy[0]).offset().top -
$(parentdiv).offset().top) + "px";
$(ff).resizable({});
dragText = upPosCode("",ff.style.left,ff.style.top,dragText);
$('#source').text(dragText);
// 更新元素绝对位置Style信息例position:left:99top:100
function upPosCode(sid,left,top,str){
var regex3 = new RegExp("&div [^&]*class=\"easyui-draggable\"[^&]*&","gi");
var groups = str.match(regex3);
var newgroup = groups[0];
if(groups){
newgroup = newgroup.replace(/position\s*:.*?;/i,"");
newgroup = newgroup.replace(/left\s*:.*?;/i,"");
newgroup = newgroup.replace(/top\s*:.*?;/i,"");
var stylegp = newgroup.match(/style=".*?"/i);
if(!stylegp){//当无style样式时，追加style
newgroup = newgroup.replace(/&$/," style=\"position:left:"+left+";top:"+top+";\"&");
//alert();
}else{//当有style样式时，追加style的postion属性
var newstyle = stylegp[0].replace(/"$/,"position:left:"+left+";top:"+top+";\"");
newgroup = newgroup.replace(stylegp,newstyle);
return str.replace(groups[0],newgroup);
$(function(){
var dragContainer = $('.dragContainer');
if(dragContainer){
var dragOptions = dragContainer.attr('drag-options');
dragContainer.mousedown(function(e){
var left = e.pageX,top = e.pageY;
var candraggerScope = dragContainer.find(dragOptions);
var candragger = findClickTargetInScope(left,top,candraggerScope);
if(candragger){
$(candragger).draggable({
disabled:false,
onStartDrag:onStartDrag,
onStopDrag:onStopDrag
* 开始拖拽组件边框变红,变层为最高层目的是不被其他组件遮挡住
function onStartDrag(e){
var d = e.
$(d.target).css("z-index","9999");
d.target.style.borderColor="red";
当停止拖拽的时候,判断是否拖拽组件或容器以及逃离了父容器的边界，
* 如果脱离，则选择到达的最小容器作为其新父容器
function onStopDrag(e){
var d = e.
$(d.target).css("z-index","0");
d.target.style.borderColor="#ccc";
$(d.target).draggable({disabled:true});
var dragContainer = $('.dragContainer').find($('.dragContainer').attr('drag-options'));
dragContainer.push($('.dragContainer')[0]);
var parentdiv = findParentInScope(d.target,dragContainer);
if(parentdiv){
d.target.style.left = ($(d.target).offset().left -
$(parentdiv).offset().left) + "px";
d.target.style.top = ($(d.target).offset().top -
$(parentdiv).offset().top) + "px";
var ff = parentdiv.appendChild(d.target);
dragText = upPosCode("",ff.style.left,ff.style.top,dragText);
$('#source').text(dragText);
* 返回最小包含父容器方法
* 查看target元素落在了什么容器范围之内,如果多个容器范围都包含它则取小的那一个容器.
* @target 拖动元素
* @containers 用于寻找是否位置包含拖动元素target位置的容器集合
* @return 返回最小(宽度最小)包含父容器
function findParentInScope(target,containers){
var parentdiv =
var toffset = $(target).offset();
containers.each(function(){
if(target!=this){
var offset = $(this).offset();
if(offset.left & toffset.left)
if(offset.left + $(this).width() & toffset.left + $(target).outerWidth())
if(offset.top & $(target).offset().top)
if((offset.top + $(this).height()) & (toffset.top + $(target).outerHeight()))
if(parentdiv == null || $(this).width()&$(parentdiv).width()){
parentdiv =
* 判断鼠标按下位置的所有组件或容器，取宽度最小的那一个
function findClickTargetInScope(left,top,containers){
var parentdiv =
containers.each(function(){
var offset = $(this).offset();
if( left & offset.left )
if( left & offset.left + $(this).width() )
if( top & offset.top )
if( top & offset.top + $(this).height() )
if( parentdiv == null || $(this).width()&$(parentdiv).width()){
parentdiv =
10.&[文件]
easyui14.rar&~&695KB&&&&
11.&[文件]
easyui14131.rar&~&708KB&&&&
12.&[文件]
easyui1422.rar&~&705KB&&&&
13.&[文件]
easyui1423.rar&~&712KB&&&&
14.&[文件]
easyui1423.rar&~&724KB&&&&
15.&[文件]
easyui1423.rar&~&724KB&&&&
16.&[文件]
扩展自定义组件.rar&~&870KB&&&&
17.&[文件]
扩展自定义组件.rar&~&817KB&&&&
开源中国-程序员在线工具：
相关的代码(1517)
0回/2177阅
20回/2148阅
开源从代码分享开始
快速开发师的其它代码