热门工具页面(拖拽实现)
<!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>
分享到：
发表评论
相关推荐
【Vue可视化拖拽编辑页面生成工具】 Vue.js是一款流行的轻量级前端JavaScript框架，它以其易用性、组件化和高性能著称。基于Vue的可视化拖拽编辑工具旨在进一步提升前端开发效率，允许开发者通过直观的图形界面设计...
【标题】：“Cms拖拽实现拖拽生成页面”这一技术是现代内容管理系统（CMS）中常见的一种交互设计，它允许用户通过简单的拖放操作来自由构建和编辑网站页面。这种功能大大降低了非技术人员创建和管理网站内容的门槛，...
"基于vue+element的在线拖拽生成表单页面的可视化表单制作工具"正是这样一款高效解决方案，它允许开发者通过简单的拖放操作快速构建复杂的表单界面，同时支持属性设置实时响应，大大提升了开发者的生产力。...
通过拖拽方式快速生成一个表单页面，表单可以导出json格式,也可以将其他人绘制的表单通过json导入方式进行还原。针对选择性控件（radio，select，checkbox）提供选择后触发调用，支持表达式。对选择性控件支持数据...
HTML5的跨iframe拖拽功能在移动端页面设计中是一个重要的技术点，它允许用户在不同的iframe之间自由地拖放元素，提升用户体验，特别是在构建可编辑的页面设计器时。本篇文章将详细探讨如何实现这一功能，并结合给定...
鲁班H5是基于Vue2.0开发的，通过拖拽的形式，生成页面的工具，类似易企秀、百度H5等工具。 鲁班H5特征： 1、编辑器 参考线 吸附线、组件对齐 拽改变组件形状 元素: 复制（画布） 元素: 删除（画布） 元素: ...
页面拖拽标签是一种交互式网页设计技术，它允许用户通过鼠标拖动操作来改变页面元素的位置，提升用户体验，尤其在创建可自定义布局的应用或工具时非常实用。这种技术主要基于HTML5、CSS3和JavaScript，尤其是jQuery...
在网页制作中，实现拖拽功能可以极大地提升用户体验，使得用户能够自由地调整页面元素的位置，从而创建个性化的布局。这种交互方式常见于各种网页编辑器、在线设计工具以及一些可自定义布局的应用中。本文将详细讲解...
本教程将详细讲解如何实现Winform窗体的工具栏画图拖拽以及自由打印功能。 一、Winform工具栏功能工具拖拽 在Winform中，我们可以使用ToolBar控件来创建工具栏。首先，从工具箱中拖拽ToolBar控件到窗体上，然后在...
1. **拖拽界面**：这类工具通常有一个大的设计区域，用户可以在这个区域内拖动各种网页元素，如文本框、图像、按钮、表格等。每个元素都有其对应的HTML标签，如`<p>`（段落）、`<img>`（图像）、`<button>`（按钮）...
通过这款工具，用户可以自由拖动页面缩略图来改变它们的顺序，确保文档逻辑清晰，便于阅读。 此外，删除页面也是Foxit PDF Page Organizer的一大亮点。对于那些包含大量无关或重复内容的PDF，我们可以快速去除多余...
在本项目中，"qt编写的点云显示工具可拖动缩放旋转"利用了Qt库的强大功能，特别是其QGLWidget组件，来创建一个用户交互式的3D点云查看器。QGLWidget是Qt提供的一种OpenGL支持的窗口，它可以用来实现高性能的3D图形...
本项目“jQuery可拖拽DIV页面”利用jQuery及其扩展插件jQuery UI，实现了一个用户界面元素（如div）可以被拖动的功能，从而为用户提供更直观的交互体验。以下是对这个知识点的详细讲解： 1. **jQuery基础**：jQuery...
在本文中，我们将深入探讨如何使用Windows Presentation Foundation (WPF) 实现图片的随意拖动功能。WPF是微软提供的一种强大的用户界面框架，用于构建桌面应用程序，它提供了丰富的图形和交互性特性。 首先，我们...
标题中的“页面拖拽功能”指的是在Web应用中实现用户可以通过鼠标拖动页面元素来执行特定操作的技术。这种功能常见于各种网页编辑器、富文本编辑器以及某些交互式应用中，增强了用户的交互体验。 在描述中提到的...
【标题】中的“基于vue+element的在线拖拽生成表单页面，支持属性设置实时响应”指的是一个使用Vue.js框架和Element UI库开发的Web应用。Vue.js是目前非常流行的前端JavaScript框架，它以轻量级、高性能和易用性著称...
本文将深入探讨如何使用JavaScript实现这一功能，让页面上的DIV元素变得可任意拖动。 首先，我们需要创建一个HTML结构，包含一个我们可以拖动的DIV元素。这个元素通常会有一个特定的类名或ID以便于JavaScript找到并...
【标题】"仿Google小工具jQuery拖动特效.zip"是一个基于jQuery库的代码资源，它旨在实现类似Google小工具的可拖动效果。这个小工具主要用于创建交互式的、用户可以自由调整位置的界面元素，提升网页的用户体验。通过...
本工具类可以实现让页面根据手指的拖动而将整个页面的内容旋转角度，通过拖拽来引发旋转动画并进行页面跳转。
"svg.draggy.js" 是一个专门针对SVG元素设计的JavaScript工具库插件，它的主要目标是提供简单易用的方法来实现SVG图形的拖拽功能。这个插件的核心特性包括： 1. **拖拽互动**：svg.draggy.js使得SVG元素具备拖动...