背景：前一阶段做了一个移动页面设计器，拖拽组件、设计器界面、组件属性都在同一个界面，导致设计器(手机壳)中的页眉和页脚位置，尤其是页脚在设计器中没办法像在真正手机中，固定在页面下方。这是由于jqm把整个页面当成了一个容器，如果页眉页脚fixed，那么页眉页脚就会跑到整个页面的最上方和最下方，而不是在设计器中，所以只能把设计器(手机壳)部分改成iframe，这样，把一个jqm完整的页面结构放入其中，页眉页脚就显示正确了。因为这个设计器是通过拖拽组件的方式生成页面，所以就出现了跨iframe的拖拽。
功能：拖拽组件生成对应组件的代码，并且可以在iframe这个容器中拖动组件进行排序。
技术：jquery 1.10,jquery-ui 1.11,html5
抛砖引玉：因为这是公司的项目，我在此只抛砖引玉，做一个小例子，页面比较丑，但是功能是实现了。现公司项目，我就不放我们的设计器界面了，我找一个别人网站的设计器的图挂上来，能更明白移动端设计器。
此设计器网站：猛戳
废话少说，show me the code!
主页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>主页面</title>
<style>
.component {border:solid #000000;width:100px;height:30px;}
</style>
</head>
<body>
<ul class="cpList">
<li id="input_type" title="文本输入框" class="component">
<div class="cpIcon"></div>
<p>文本输入框</p>
</li>
<li id="label_type" title="文本" class="component">
<div class="cpIcon"></div>
<p>文本</p>
</li>
</ul>
<iframe id="frame" name="frame" src="frame.html" style="margin:10px auto;display:block;border:solid 1;"></iframe>
</body>
<script src="jquery.js" type="text/javascript"></script>
<script>
$(function(){
//可拖拽组件初始化
$('.cpList li').each(function(){
$(this).attr("draggable","true");
});
})
</script>
</html>
iframe页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="jquery-ui.css"/>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>
<script src="draggable.js" type="text/javascript"></script>
<style>
.liClass {border:solid #000000;width:180px;height:30px;}
.tab {min-height:100px;}
</style>
</head>
<body>
<ul class="tab">
<li class="liClass"><label>aaaaaaa</label></li>
</ul>
</body>
<script>
$(function(){
$(".cpList", parent.document).find("li").each(function() {
$(this).on("dragstart", function(ev) {//开始拖拽
var dt = ev.originalEvent.dataTransfer;
dt.setData('Text', ev.target.id);//将拖拽组件ID传入
});
});
//拖拽组件
Draggable({destId:".tab",dragTag:"li"});
})
</script>
</html>
draggable.js代码：
function Draggable(options){
var options = options||{};
var tag = options.dragTag||"LI";//目前只支持li
tag = tag.toUpperCase();
var $dest = $(options.destId);//拖拽放入的容器对象
$dest.on("dragover", function(ev) {
ev.preventDefault();
});
$dest.on("drop", function(ev) {
ev.preventDefault();
var df = ev.originalEvent.dataTransfer;
var data = df.getData("Text");
var el = ev.target;//目标对象
var ctx = $(this).get(0);//当前容器
if (data==""){
return false;
}
do {
var litem = document.createElement('li');
var item = $(litem);
var html = "";
if (data=='input_type'){
html = "<input type='text' readonly value='test' />";
}else if (data=='label_type'){
html = "<label>测试文本</label>";
}
$(item).addClass("liClass");
$(item).html(html);
if ($(this).children().length>0){//当前容器下有li
if(tag === '' || el.nodeName == tag){//当前目标对象的tagName是LI
if (el.nextElementSibling){//如果当前对象的下一个兄弟节点存在，那么就将当前拖拽的对象插入到这个兄弟节点的前面
el.parentNode.insertBefore($(item).get(0),el.nextElementSibling);
}else{//兄弟节点不存，那么直接append到容器中
ctx.appendChild($(item).get(0));
}
}
}else{//当前容器下没有li，直接append进这个容器中
ctx.appendChild($(item).get(0));
}
}
while(el !== ctx && (el = el.parentNode));//当前目标对象不是容器，那么就将当前目标对象的父级节点赋值给当前目标对象
});
$dest.sortable();//JQUERY UI sortable组件
return (function(){
})(options);
}
相关推荐
它能够在任何容器（如div、iframe等）内启用鼠标或触摸事件，使得用户可以像在手机上滑动屏幕一样，通过拖拽元素来实现页面的上下滚动。这种功能对于需要展示大量内容的长页面或者需要自定义滚动区域的情况尤其有用...
HTML5拖放API允许用户通过拖拽操作来交互。通过调用`dragstart`, `drag`, `dragend`, `drop`等事件来处理拖放操作。 #### HTTP/2.0 HTTP/2.0是HTTP协议的最新版本，它改进了数据传输的效率，支持服务端推送等新特性...
5. **拖拽功能**：内置了拖拽功能，用户可以通过拖动来调整日历控件的位置。 6. **年份范围选择**：提供了可选择的年份范围，默认为前后50年，用户可以根据需求进行调整。 7. **兼容性**：该控件使用了HTML、CSS...
HTML5不仅包含了HTML4的所有功能，还引入了新的元素和特性，如拖拽功能、离线存储、多媒体标签等。 **9. HTML语义化的理解？** - 使用具有明确含义的标签（如`<article>`, `<section>`），使页面结构更清晰，有利...