热门工具页面(拖拽实现)
<!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" xmlns:z="http://ria.zte.com.cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="../../../skins/default/main.css" />
<link type="text/css" rel="stylesheet" href="../../../skins/default/popup.css" />
<link type="text/css" rel="stylesheet" href="../../../css/ria_processbar1.css" />
<link type="text/css" rel="stylesheet" href="../../../css/table_cssCn.css" />
<script type="text/javascript" src="../../../js/popupdialogbox.js"></script>
<script type="text/javascript" src="../../../js/jquery.pack.js"></script>
<script type="text/javascript" src="../../../js/ria_core.js"></script>
<script type="text/javascript" src="../../../js/ria_table.js"></script>
<script type="text/javascript" src="../../../js/ria_component.js"></script>
<script type="text/javascript" src="../../../js/common.js"></script>
<script type="text/javascript" src="../../../js/addEvent.js"></script>
<script type="text/javascript" src="../../../js/Calendar.js"></script>
<script type="text/javascript" src="../../../js/umapcommon.js"></script>
<script type="text/javascript" src="../../../js/omp_validate.js"></script>
<script type="text/javascript" src="../../sys/sys.js"></script>
<link type="text/css" rel="stylesheet" href="../css/toolstoremanager.css" />
</head>
<script>
window.onload = function() {
//绑定事件
var addEvent = document.addEventListener ? function(el, type, callback) {
el.addEventListener(type, callback, !1);
}
: function(el, type, callback) {
el.attachEvent("on" + type, callback);
}
//判定对样式的支持
var getStyleName = (function() {
var prefixes = [ '', '-ms-', '-moz-', '-webkit-', '-khtml-', '-o-' ];
var reg_cap = /-([a-z])/g;
function getStyleName(css, el) {
el = el || document.documentElement;
var style = el.style, test;
for ( var i = 0, l = prefixes.length; i < l; i++) {
test = (prefixes[i] + css).replace(reg_cap,
function($0, $1) {
return $1.toUpperCase();
});
if (test in style) {
return test;
}
}
return null;
}
return getStyleName;
})();
var userSelect = getStyleName("user-select");
//精确获取样式
var getStyle = document.defaultView ? function(el, style) {
return document.defaultView.getComputedStyle(el, null)
.getPropertyValue(style)
} : function(el, style) {
style = style.replace(/\-(\w)/g, function($, $1) {
return $1.toUpperCase();
});
return el.currentStyle[style];
}
var dragManager = {
y : 0,
dragStart : function(e) {
e = e || event;
var handler = e.target || e.srcElement;
if (handler.nodeName === "TD") {
handler = handler.parentNode;
dragManager.handler = handler;
if (!handler.getAttribute("data-background")) {
handler.setAttribute("data-background", getStyle(
handler, "background-color"))
}
//显示为可移动的状态
handler.style.backgroundColor = "#ccc";
handler.style.cursor = "move";
dragManager.y = e.clientY;
//★★★★★★★★★★★★★★★★★★★★
if (typeof userSelect === "string") {
return document.documentElement.style[userSelect] = "none";
}
document.unselectable = "on";
document.onselectstart = function() {
return false;
}
//★★★★★★★★★★★★★★★★★★★★
}
},
draging : function(e) {//mousemove时拖动行
var handler = dragManager.handler;
if (handler) {
e = e || event;
var y = e.clientY;
var down = y > dragManager.y;//是否向下移动
var tr = document.elementFromPoint(e.clientX, e.clientY);
if (tr && tr.nodeName == "TD") {
tr = tr.parentNode
dragManager.y = y;
if (handler !== tr) {
tr.parentNode.insertBefore(handler,
(down ? tr.nextSibling : tr));
}
}
;
}
updateTable();
},
dragEnd : function() {
var handler = dragManager.handler
if (handler) {
handler.style.backgroundColor = handler
.getAttribute("data-background");
handler.style.cursor = "default";
dragManager.handler = null;
}
//★★★★★★★★★★★★★★★★★★★★
if (typeof userSelect === "string") {
return document.documentElement.style[userSelect] = "text";
}
document.unselectable = "off";
document.onselectstart = null;
updateTable();
//★★★★★★★★★★★★★★★★★★★★
},
main : function(el) {
addEvent(el, "mousedown", dragManager.dragStart);
addEvent(el, "mousemove", dragManager.draging);
addEvent(el, "mouseup", dragManager.dragEnd);
}
}
var el = document.getElementById("hottable");
dragManager.main(el);
}
</script>
<script>
var tooltypeMap={};
var toolclassifyMap={};
//转换工具分类
function gettooltype(keyvalue){
keyvalue['eaassort'] = tooltypeMap[keyvalue['eaassort']];
return keyvalue;
}
//转换工具类型
function gettoolclassify(keyvalue){
keyvalue['eagenre'] = toolclassifyMap[keyvalue['eagenre']];
return keyvalue;
}
//转换时间显示
function formatTime(keyvalue) {
keyvalue['activetime'] = getTime(keyvalue['activetime']);
return keyvalue;
}
function init(){
//查询热门工具信息 反馈一个string 我们可以放置到table中
callSid('hotSearch');
callSid('gettype','','$M.typeList');
callSid('getclass','','$M.classList');
//获取工具分类(table)
callUrl('tooleapath/getMapToolstype.ssm',null,'tooltypeMap',true);
tooltypeMap = tooltypeMap.rtnValue;
//获取工具类型(table)
callUrl('tooleapath/getMapToolclassify.ssm',null,'toolclassifyMap',true);
toolclassifyMap = toolclassifyMap.rtnValue;
//查询热门工具信息
searchTableData('toolSearch','$M.ea','toolmaintenancelist');
}
addOnloadEvent(init);
function geteaassortName(keyvalue){
keyvalue['eaassort'] = typeMap[keyvalue['eaassort']];
return keyvalue;
}
function geteagenreName(keyvalue){
keyvalue['eagenre'] = classMap[keyvalue['eagenre']];
return keyvalue;
}
function submitquery(){
clearData();
searchTableData('stuSearch','$M.queryObj','toolmaintenancelist');
}
function clearData(){
clearAllMsgWide();
}
function dealResult(){
var ls=document.getElementById("txtResult").value;
//得到一个string 是以*分割对象字符串 然后通过遍历对象 放置到页面id为hottable的table中
var tool=ls.split("*");
var sum=tool.length-1;
var opanel=document.getElementById("hottable");
var pchildren = opanel.childNodes;
//清空表中的行和列
for(var a=0; a<pchildren.length; a++){
opanel.removeChild(pchildren[a]);
}
for(var i=0;i<sum;i++)
{
var newRow = opanel.insertRow();
// newRow.setAttribute("onDblClick","document.getElementById('checkrowid').value=this.rowIndex;document.getElementByid('toolinfo').value='"+tool[i]+"';clearStyle();this.style.background='red';");
// newRow.setAttribute("onMouseDown","document.getElementById('checkrowid').value=this.rowIndex;document.getElementById('toolinfo').value='"+tool[i]+"';clearStyle();this.style.background='rgb(226,255,219)';");
//得到表的对象并插入一行，下面是插入了行以后，填充相应的列节点，如下面所示
newRow.onmousedown=function(){
document.getElementById('checkrowid').value=this.rowIndex;
document.getElementById('toolinfo').value='"+tool[i]+"';
clearStyle();
this.style.cssText='background:rgb(226,255,219)';
}
var oCell = newRow.insertCell();//插入列的节点
oCell.setAttribute("width","80%");
oCell.innerHTML = "<input type=hidden value="+tool[i].split(",")[0]+" name='saveids' />"+tool[i].split(",")[1]; //列里面填充的值，innerHtml值列内的所有元素
// oCell.innerHTML = tool[i].split(",")[1];
oCell = newRow.insertCell();
oCell.setAttribute("width","10%");
oCell.innerHTML = "<input type=hidden value="+tool[i].split(",")[5]+" name='savesorts' />"+tool[i].split(",")[5];
//删除列
oCell = newRow.insertCell();
oCell.setAttribute("width","10%");
oCell.innerHTML = "<img src='../img/del.gif' names='pics' onclick='delHotTool("+tool[i].split(",")[0]+")'/>";
//newRow.setAttribute("onMouseover","showDelpic('"+newRow+"','"+tool[i].split(",")[0]+"')");
}
}
//删除热门工具
function delHotTool(id){
if (!window.confirm(''+$res_entry("msg.mcp.common.confirmdelete"))){
return ;
}
//要删除的工具id带上 用以删除
document.getElementById("delHotId").value=id;
callSid('delHotTool','[$M.del]');
}
//条件查询工具信息
function queryeainfo(){
searchTableData('toolSearch','$M.ea','toolmaintenancelist');
}
//将工具添加到热门工具表
function addHotTool(){
var checkedids="";
for (var i=0 ;i<document.getElementsByName("check").length;i++)
{
if(document.getElementsByName("check")[i].checked)
{
checkedids+=document.getElementsByName("check")[i].value+","
}
}
//得到选择的工具的id(此id用于 1，将工具列表中的该条信息过滤掉 2，添加至工具排行表中)
//alert(checkedids);
if(checkedids=='')
{
openMsg("1:"+$res_entry("lable.omp.toolstoremanager.content.nochecked"),"omp/toolstoremanager/content/hotTool.html",false);
}else{
document.getElementById("checkedids").value=checkedids;
callSid('insertToolmaintenance','[$M.tool]');
}
}
//保存排序
function savasort(){
var aftersave="";
for(var i=0;i<document.getElementsByName("saveids").length;i++)
{
//判断是用来去除掉删除的信息的id。
if(document.getElementById("delHotId").value!=document.getElementsByName("saveids")[i].value){
aftersave+=document.getElementsByName("saveids")[i].value+",";
}
};
document.getElementById("hottoolids").value=aftersave;
callSid('updatesortbyids','[$M.sort]');
}
//添加到热门工具后响应 insertToolmaintenance
function insertResponse(){
var code=document.getElementById("txtResult").value;
if( code== "success"){
openMsg("0:"+$res_entry("lable.omp.toolstoremanager.content.addSuccess"),"omp/toolstoremanager/content/hotTool.html",true);
//init();
}else if(code=="error"){
openMsg("1:"+$res_entry("lable.omp.toolstoremanager.content.addFiled"),"omp/toolstoremanager/content/hotTool.html",true);
}else{
openMsg("1:"+$res_entry("lable.omp.toolstoremanager.content.addFiled"),"omp/toolstoremanager/content/hotTool.html",true);
}
}
//修改排序信息结果响应 updatesortbyids
function updateResponse(){
var code=document.getElementById("txtResult").value;
if( code== "success"){
openMsg("0:"+$res_entry("lable.omp.toolstoremanager.content.updateSuccess"),"omp/toolstoremanager/content/hotTool.html",true);
//init();
}else if(code=="error"){
openMsg("1:"+$res_entry("lable.omp.toolstoremanager.content.updateFiled"),"omp/toolstoremanager/content/hotTool.html",true);
}else{
openMsg("1:"+$res_entry("lable.omp.toolstoremanager.content.updateFiled"),"omp/toolstoremanager/content/hotTool.html",true);
}
};
//删除热门工具信息结果响应
function delResponse(){
var code=document.getElementById("txtResult").value;
if(code== "success"){
//删除信息之后应当保存修改后的顺序
savasort();
//openMsg("0:"+$res_entry("lable.omp.toolstoremanager.content.delSuccess"),"omp/toolstoremanager/content/hotTool.html",true);
}else if(code=="error"){
openMsg("1:"+$res_entry("lable.omp.toolstoremanager.content.delFiled"),"omp/toolstoremanager/content/hotTool.html",true);
}else{
openMsg("1:"+$res_entry("lable.omp.toolstoremanager.content.delFiled"),"omp/toolstoremanager/content/hotTool.html",true);
}
}
//上移行
function upsort(){
//获取table对象
var opanel=document.getElementById("hottable");
var checksort=document.getElementById('checkrowid').value;
if(checksort=='')
{
openMsg("1:"+$res_entry("lable.omp.toolstoremanager.content.nochecked"),"omp/toolstoremanager/content/hotTool.html",false);
return ;
}
if(checksort<=0)
{
openMsg("1:"+$res_entry("lable.omp.toolstoremanager.content.onfirst"),"omp/toolstoremanager/content/hotTool.html",false);
return ;
}
opanel.deleteRow(checksort);
var tool=document.getElementById("toolinfo").value;
var newRow = opanel.insertRow(parseInt(checksort)-1);
newRow.setAttribute("style","background:rgb(226,255,219)");
newRow.setAttribute("onMouseDown",";document.getElementById('toolinfo').value='"+tool+"';clearStyle();this.style.background='rgb(226,255,219)';");
//得到表的对象并插入一行，下面是插入了行以后，填充相应的列节点，如下面所示
var oCell = newRow.insertCell();//插入列的节点
oCell.setAttribute("width","80%");
oCell.innerHTML = "<input type=hidden value="+tool.split(",")[0]+" name='saveids' />"+tool.split(",")[1];
oCell = newRow.insertCell();
oCell.setAttribute("width","10%");
oCell.innerHTML = "<input type=hidden value="+tool.split(",")[5]+" name='savesorts' />"+tool.split(",")[5];
oCell = newRow.insertCell();
oCell.setAttribute("width","10%");
oCell.innerHTML = "<img src='../img/del.gif' names='pics' onclick='delHotTool("+tool.split(",")[0]+")'/>";
//上移一行之后 将保存的行号信息更新
document.getElementById('checkrowid').value=parseInt(newRow.rowIndex);
}
//下移行
function downsort(){
//获取table对象
var opanel=document.getElementById("hottable");
var checksort=document.getElementById('checkrowid').value;
var len=document.getElementById("hottable").rows.length;
//没有选中信息
if(checksort=='')
{
openMsg("1:"+$res_entry("lable.omp.toolstoremanager.content.nochecked"),"omp/toolstoremanager/content/hotTool.html",false);
return ;
}
//已经到达最后一行
if(parseInt(checksort)>(parseInt(len)-2))
{
openMsg("1:"+$res_entry("lable.omp.toolstoremanager.content.onlast"),"omp/toolstoremanager/content/hotTool.html",false);
return ;
}
opanel.deleteRow(checksort);
var tool=document.getElementById("toolinfo").value;
var newRow = opanel.insertRow(parseInt(checksort)+1);
newRow.setAttribute("style","background:rgb(226,255,219)");
newRow.setAttribute("onMouseDown","document.getElementById('toolinfo').value='"+tool+"';clearStyle();this.style.background='rgb(226,255,219)';");
//得到表的对象并插入一行，下面是插入了行以后，填充相应的列节点，如下面所示
var oCell = newRow.insertCell();//插入列的节点
oCell.setAttribute("width","80%");
oCell.innerHTML = "<input type=hidden value="+tool.split(",")[0]+" name='saveids' />"+tool.split(",")[1];
oCell = newRow.insertCell();
oCell.setAttribute("width","10%");
oCell.innerHTML = "<input type=hidden value="+tool.split(",")[5]+" name='savesorts' />"+tool.split(",")[5];
oCell = newRow.insertCell();
oCell.setAttribute("width","10%");
oCell.innerHTML = "<img src='../img/del.gif' names='pics' onclick='delHotTool("+tool.split(",")[0]+")'/>";
//将保存的行号信息更新
document.getElementById('checkrowid').value=parseInt(newRow.rowIndex);
}
//请除样式
function clearStyle(){
for(var i=0;i<document.getElementById("hottable").rows.length;i++)
{
// alert(document.getElementById("hottable").rows[i].style.background);
document.getElementById("hottable").rows[i].style.background='white';
}
}
//更新表的信息 防止拖拽加移动引起的table混乱
function updateTable(){
var isChecked=false;
for(var i=0;i<document.getElementById("hottable").rows.length;i++)
{
if(document.getElementById("hottable").rows[i].style.background=='rgb(226,255,219)'){
document.getElementById('checkrowid').value=document.getElementById("hottable").rows[i].rowIndex;
isChecked=true;
};
}
//如果没有选中 清空保存的选中信息
if(!isChecked)
{
document.getElementById('checkrowid').value='';
}
}
function afterSearch(tableData,tableId){
noDataTrips(tableData,tableId);
}
</script>
<body>
<input id="txtResult" type="hidden"/>
<input id="checkedids" type="hidden"/>
<input id="hottoolids" type="hidden"/>
<input id="delHotId" type="hidden"/>
<input id="checkrowid" type="hidden"/>
<input id="toolinfo" type="hidden" />
<z:binds id="temp_binds">
<z:bind ctrl="txtResult" ref="result" />
<z:bind ctrl="checkedids" ref="tool.hottoolid" />
<z:bind ctrl="hottoolids" ref="sort.hottoolids" />
<z:bind ctrl="tooleaname" ref="ea.eaname" />
<z:bind ctrl="toolactivetime" ref="ea.activetime" />
<z:bind ctrl="tooleaassort" ref="ea.eaassort" />
<z:bind ctrl="tooleagenre" ref="ea.eagenre" />
<z:bind ctrl="delHotId" ref="del.hottoolid" />
<z:bind ctrl="tooleagenre" ref="classList" ctrlext="text:textList;value:valueList;defaultValue:defaultValue"></z:bind>
<z:bind ctrl="tooleaassort" ref="typeList" ctrlext="text:textList;value:valueList;defaultValue:defaultValue"></z:bind>
</z:binds>
<z:service id="insertToolmaintenance" method='post' url="toolmaintenancepath/insertToolMaintenance.ssm">
<z:request para="[$M.tool]" />
<z:response rtn="$M.result" postResponse="insertResponse();" />
</z:service>
<z:service id="updatesortbyids" method='post' url="toolmaintenancepath/updatehottoolsortbyid.ssm">
<z:request para="[$M.sort]" />
<z:response rtn="$M.result" postResponse="updateResponse();" />
</z:service>
<z:service id="toolSearch" method='post' url="tooleapath/pageInfoQueryHot.ssm">
<z:request para="[$M.ea]" />
<z:response postResponse="afterSearch($M.toolmaintenancelist,'toolmaintenancelist')"/>
</z:service>
<z:service id="hotSearch" method='post' url="toolmaintenancepath/getToolAllforString.ssm" onError="dealResult()">
<z:request para="[$M.queryObj]" />
<z:response rtn="$M.result" postResponse="dealResult()"/>
</z:service>
<z:service id="getclass" method="get" url="tooleapath/getToolclassifySelect.ssm" onError="show()">
<z:request preRequest="" postRequest=""></z:request>
<z:response rtn="$M.classList" preResponse="" postResponse=""></z:response>
</z:service>
<z:service id="gettype" method="get" url="tooleapath/getToolstypeSelect.ssm" onError="show()">
<z:request preRequest="" postRequest=""></z:request>
<z:response rtn="$M.typeList" preResponse="" postResponse=""></z:response>
</z:service>
<z:service id="delHotTool" method='post' url="toolmaintenancepath/delToolMaintenance.ssm">
<z:request para="[$M.del]" />
<z:response rtn="$M.result" postResponse="delResponse();" />
</z:service>
<z:include id="" url="../../common/popupdialogbox.html" />
<div class="title">
<z:navi id="navi1" menuId="portal.content.popvindicate"></z:navi>
</div>
<div class="tab">
<table>
<tr>
<td class="on"><a href="#"><span resid="span.toolstoremanager.content.hottoolmanager"></span></a></td>
</tr>
</table>
</div>
<div class="tabBlock">
<div class="editBlock">
<form>
<table width="100%" id="table2" class="tb_searchbar">
<tr>
<td colspan="4" class="subtitle" >
<label resid="tab.sdp.queryInfo"></label>
</td>
</tr>
<tbody>
<tr>
<th width="20%">
<label resid="lable.omp.toolstoremanager.content.ename"></label>
</th>
<td width="30%">
<input class="inputText" type="text" maxlength="200" name="tooleaname" id="tooleaname"/>
<th width="20%">
<label resid="lable.omp.toolstoremanager.content.eaassort"></label>
</th>
<td width="30%">
<select style="width: 130px" id="tooleaassort">
</select>
</td>
</tr>
<tr>
<th width="20%">
<label resid="lable.omp.toolstoremanager.content.eagenre"></label>
</th>
<td>
<select style="WIDTH: 130px" id="tooleagenre">
</select>
</td>
</tr>
<tr>
<th width="20%">
<label resid="lable.omp.toolstoremanager.content.activetime"></label>
</th>
<td>
<z:calendar id="toolactivetime"
target="activetime"
formate='yyyy-mm-dd'
imgurl='../../../images/calendar.gif'>
</z:calendar>
</td>
<th width="20%">
</th>
<td>
</td>
</tr>
<tr>
<td colspan="4" class="toolbar">
<input id="ea_submit" type="button" class="inputButton" resid="button.query" onclick="queryeainfo()"/>
<input id="bulletin_reset" type="reset" class="inputButton" resid="button.clear" onclick="clearData()"/>
</td>
</tr>
</tbody>
</table>
</form>
</div>
<div class="dataGrid dataGrid_bordernull">
<div id="table_cpspQuery_scDiv">
<table width="100%" class="title-table">
<tr>
<td class="subtitle" >
<label resid="lable.omp.toolstoremanager.content.addhotTool"></label>
</td>
</tr>
</table>
<table>
<tr>
<td class="tools_detail" valign="top">
<table>
<tr>
<td>
<z:table turnpage="true" editable="false" pagesizelist="10,25,50" isserversort="true" width="100%" id="toolmaintenancelist">
<z:column id="eaid" caption="工具ID" resid="caption.omp.toolstoremanager.content.eaid" prop="eaid" captionstyle="text-align:center" style="text-align:center;" ></z:column>
<z:column id="eaname" caption="工具名称" resid="caption.omp.toolstoremanager.content.ename" prop="eaname" captionstyle="text-align:center" style="text-align:center;" ></z:column>
<z:column id="activetime" caption="时间" resid="caption.omp.toolstoremanager.content.activetime" prop="activetime" captionstyle="text-align:center" style="text-align:center;" calculate="formatTime"></z:column>
<z:column id="eaassort" caption="工具分类" calculate="gettooltype" resid="caption.omp.toolstoremanager.content.eaassort" prop="eaassort" captionstyle="text-align:center" style="text-align:center;"></z:column>
<z:column id="eagenre" caption="工具类型" calculate="gettoolclassify" resid="caption.omp.toolstoremanager.content.eagenre" prop="eagenre" captionstyle="text-align:center" style="text-align:center;"></z:column>
<z:column id=col0 width="10%" resid="caption.omp.toolstoremanager.criticism.all" checkall="true" iskey="true">
<input type="checkbox" value="" name='check' prop="eaid" onclick="cbevent(this)"/>
</z:column>
</z:table>
</td>
</tr>
<tr>
<td>
<input type="button" onclick="addHotTool();" class="inputButton" resid="button.omp.toolstoremanager.content.addhotTool" />
</td>
</tr>
</table>
</td>
<td class="tools_rank" valign="top">
<table>
<tbody>
<tr class=tr_detail>
<th>
<span resid="span.toolstoremanager.content.hottoolsort"></span>
</th>
</tr>
<tr>
<td>
<div class="sort_wrap_div">
<table class="sortClass sortClass1" style="" id="hottable">
</table>
</div>
<div class="operate">
<a href="#" ><img onclick="upsort()" src="../../../images/icon_shiftup.gif"></a>
<a href="#""><img onclick="downsort()" src="../../../images/icon_shiftdown.gif"></a>
</div>
</td>
</tr>
<tr>
<td id="table_cpspQuery_pages" class="tableNavigator rankSubmit">
<input id="ea_submit" type="button" class="inputButton" resid="button.save" onclick="savasort();"/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
</div>
</div></body>
</html>
分享到：
发表评论
相关推荐
鲁班H5是基于Vue2.0开发的，通过拖拽的形式，生成页面的工具，类似易企秀、百度H5等工具。 鲁班H5特征： 1、编辑器 参考线 吸附线、组件对齐 拽改变组件形状 元素: 复制（画布） 元素: 删除（画布） 元素: ...
页面上可以任意拖动DIV，js实现的,推荐一下
本工具类可以实现让页面根据手指的拖动而将整个页面的内容旋转角度，通过拖拽来引发旋转动画并进行页面跳转。
技术栈 前端： vue: 模块化开发少不了angular，react，vue三选一，这里选择了vue。 vuex: 状态管理 sass: css预编译器。 element-ui：不造轮子，有现成的优秀的vue组件库当然要用起来。...编辑器快照的另一种实现方式
鲁班H5是基于Vue2.0开发的，通过拖拽的形式，生成页面的工具，类似易企秀、百度H5等工具。 鲁班H5特征： 1、编辑器 参考线 吸附线、组件对齐 拽改变组件形状 元素: 复制（画布） 元素: 删除（画布） 元素: ...
NULL 博文链接：https://zhangzhaoaaa.iteye.com/blog/2117172
动画效果如果直接用数据驱动，动画比较僵硬，建议使用一些弹性动画效果如果拖拽函数使用html5，拖动函数，不好用，而且拖起来有个很难看的一块，不方便自定义；建议自己改用onmouesemove / start / end来原生书写...
此次是利用了python技术来实现的一个 文件...通过拖拽的方式将图片拖动至制定的页面时，也能够实现很好的上传效果，最终也可以实现销毁成功。 图4.4文件销毁过程展示界面 第5章 系统测试 5.1测试目的 此次的基于pyt
JW页面工厂是一个适用于joomla的自由拖拽式建站工具，受到国内众多Joomla用户的信任。JW页面生成器功能性和随时可用性强，无论你是初学者还是专业人士，它都能让你独立建立一个网站！ JW页面工厂功能特性 1、充分...
实现页面工具箱拖动效果，类似客户端拖动画流程的功能。
(3) 删除网址功能：单击选中一行，或者按住鼠标左键向上或向下拖动选中多行，或者按快捷键“Ctrl A”全选网址，而后单击“删除网址”按钮或者按Delete键即可删除选中的网址； (4) 打开网页功能：单击“打开网页...
运用插件实现页面模块的拖拽排序,将排序的结果提交到后台
用VML 实现的可以拖动的图象. 图象保存为XML 格式. 可以用XML 编辑工具修改XML, 刷新页面即可得到新的图象. 这个例子中包含方框和箭头的使用.
具体的实例，实现窗体中工具栏的浮动，设计页面新颖，运行程序拖动工具栏，随意放到窗体的左右下面
对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同...
目前能想到还未实现的大功能点如下：静态配置文件的防缓存组件的按需打包，按需加载全局状态的约定以及管理拖拽布局后台实现复交互类型页面的配置要实现以上功能，凭借个人力量需要长时间的整理分析，并且独立维护...
酷屏桌面工具条是一款桌面美化和管理软件，可以快捷切换电脑桌面壁纸，并提供简 洁的管理界面和快捷的管理流程，把常用工具软件分类管理，方便使用。丰富的桌面壁纸资源，强大的桌面管理图片查看功能。酷屏桌面工具...
现在有很多优秀的拖拽布局工具，，, 。 我们最近也实现了类似的功能，废话不多说，先把预览贴出来（不知道为什么掘金现在图片不支持gif了，还要自己上传到图床）。 在实现这个的功能的过程中，也走了一点弯路，我们...
3.支持页面拖拽,并且可以定义拖拽各方向的功能(类似GreenBrowser).拖拽开启时,页面中原本拖拽所实现的部分功能能正常使用,如将一段文字拖拽进一个textarea,input等,好像现在网上流行的多页面浏览器并不具备这个功能...