2. 程式人生 > 其它 >用於拖拽放置的前端程式碼

用於拖拽放置的前端程式碼

阿新 • • 發佈：2022-11-29

用於拖拽放置的前端程式碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>後臺</title>
	<link rel="stylesheet" href="/static/layui/css/layui.css">
	<script src="/static/jquery-1.11.3.min.js"></script>
	<link rel="stylesheet" href="/static/fontawesome/css/font-awesome.css">
	<script src="/static/echarts.min.js"></script>
	
	<style type="text/css">
		.layui_tool{height:50px;box-shadow:0px 0px 10px -5px #333;padding:10px 10px 10px 10px}
		.edit_page{position:relative;height:1200px;width:100%}
		.edit_page .box_area{position:absolute;left:0px;top:0px;z-index:1;box-shadow:0px 0px 5px -2px #333}
		.edit_page .box_area .drag{height:45px;}
		.edit_page .box_area .drag .drag_ico{float:left;height:45px;width:45px;cursor:move;line-height:35px;text-align:center;}
		.edit_page .box_area .drag .del_ico{float:right;height:45px;width:45px;cursor:pointer;line-height:35px;text-align:center;}
		.edit_page .box_area .html_area{padding:5px}
		.edit_page .btn_select select{padding:3px 5px;border:#C9C9C9 solid 1px;border-radius:3px;}
		.page_echart .html_area textarea{padding:3px 5px;border:#C9C9C9 solid 1px;border-radius:3px;min-width:400px;height:50px;margin-top:5px}
		.page_echart .page_echart_area{height:320px;width:450px;}
		.btn_textarea textarea{width:250px;}
		.layui-progress{width:300px;}
		.layui-form-label{width:170px}
		.layui-form-item{margin-bottom:0px}
		.layui-form-item .layui-input-inline{margin:0px;}
		.script_echart_area{display:none;}
		.sucai{display:none;}
	</style>
</head>
<body>
<div class="layui_tool">
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="yulang(this)" style="background:#009688;color:#fff">預覽</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="btn_xs()">迷你按鈕</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="btn_sm()">小型按鈕</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="page_upload()">上傳檔案</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="btn_input_text()">單行輸入框</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="btn_textarea()">多行輸入框</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="btn_input_date()">日期選擇</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="btn_input_time()">時間選擇</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="pagetxt()">網頁純文字</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="btn_checkbox()">複選框</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="btn_select()">下拉框</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="page_blockquote()">提示條</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="page_progress_bar()">進度條</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="page_timeline()">常規時間線</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="page_echart()">資料視覺化</button>

	

	
</div>
<div class="edit_page"></div>
<div class="sucai">
	<div class="box_area btn_xs">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<button type="button" class="layui-btn layui-btn-primary layui-btn-xs contenteditable" contenteditable="true">迷你按鈕</button>
		</div>
	</div>
	<div class="box_area btn_sm">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<button type="button" class="layui-btn layui-btn-primary layui-btn-sm contenteditable" contenteditable="true">小型按鈕</button>
		</div>
	</div>
	<div class="box_area btn_input_text">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<div class="layui-form-item">
				<label class="layui-form-label contenteditable" contenteditable="true">單行輸入框</label>
				<div class="layui-input-inline">
					<input type="text" name="username" lay-verify="required" placeholder="請輸入" autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>
	</div>
	<div class="box_area btn_input_date">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<div class="layui-inline">
				<label class="layui-form-label contenteditable" contenteditable="true">日期選擇</label>
				<div class="layui-input-inline">
					<input type="date" class="layui-input" placeholder="yyyy">
				</div>
			</div>
		</div>
	</div>
	<div class="box_area btn_input_time">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<div class="layui-inline">
				<label class="layui-form-label contenteditable" contenteditable="true">時間選擇</label>
				<div class="layui-input-inline">
					<input type="time" class="layui-input" placeholder="HH:ss">
				</div>
			</div>
		</div>
	</div>
	<div class="box_area pagetxt">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area contenteditable" contenteditable="true">網頁純文字</div>
	</div>
	<div class="box_area btn_checkbox">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area" style="text-align:center;"><input type="checkbox" name="" title=""></div>
	</div>
	<div class="box_area btn_select">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<div class="layui-inline">
				<div class="layui-input-inline">
					<select>
						<option>#value#</option>
					</select>
				</div>
			</div>
		</div>
	</div>
	<div class="box_area btn_textarea">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<div class="layui-inline">
				<label class="layui-form-label contenteditable" contenteditable="true">多行輸入框</label>
				<div class="layui-input-inline">
					<textarea placeholder="請輸入" class="layui-textarea"></textarea>
				</div>
			</div>
		</div>
	</div>
	<div class="box_area page_blockquote">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<blockquote class="layui-elem-quote  contenteditable" contenteditable="true">長按空格可增加長度</blockquote>
		</div>
	</div>
	<div class="box_area page_progress_bar">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<div class="layui-progress layui-progress-big" lay-showpercent="true">
				<div class="layui-progress-bar" lay-percent="#value#" style="width:#value#;"><span class="layui-progress-text">#value#</span></div>
			</div>
		</div>
	</div>
	<div class="box_area page_timeline">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area contenteditable" contenteditable="true">
			<ul class="layui-timeline">
				<li class="layui-timeline-item">
				  <i class="layui-icon layui-timeline-axis"></i>
				  <div class="layui-timeline-content layui-text">
					<h3 class="layui-timeline-title">01月01日</h3>
					<p>
					  1、複製的時候要連球型的圖示也一起復制進去
					  <br>2、在這段文字的最末端回車換行然後貼上就可以，是這段文字而不是最後面的文字
					</p>
				  </div>
				</li>
				<li class="layui-timeline-item">
				  <i class="layui-icon layui-timeline-axis"></i>
				  <div class="layui-timeline-content layui-text">
					<div class="layui-timeline-title">過去</div>
				  </div>
				</li>
			</ul>  
		</div>
	</div>
	<div class="box_area page_upload">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<div class="layui-inline">
				<div class="layui-input-inline">
					<label>
						<u>#value#</u>
						<input type="file" style="display:none"/>
					</label>
					
				</div>
			</div>
		</div>
	</div>

	<div class="box_area page_echart">
		<div class="drag">
			<div class="drag_ico fa fa-arrows"></div>
			<div class="del_ico fa fa-trash-o"></div>
		</div>
		<div class="html_area">
			<div id="container_#value#" class="page_echart_area"></div>
			#script#
		</div>
	</div>
	
</div>
<textarea class="script_echart_area">
var dom = document.getElementById('#id_name#');
var myChart = echarts.init(dom, null, {
	renderer: 'canvas',
	useDirtyRect: false,
});
var app = {};
var option;
#script#
if (option && typeof option === 'object') {
	myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
</textarea>

<div class="css_area"></div>
<script src="/static/layui/layui.all.js"></script>
<script>
page_is_edit=1;
function yulang(this_obj){
	if(page_is_edit==1){
		$(this_obj).html('編輯');
		let css_area = '<style>.edit_page .box_area .drag *{display:none;}.edit_page .box_area{box-shadow:none}</style>';
		$('.css_area').html(css_area);
		$('.contenteditable').each(function(index, value){
			$(value).attr({'contenteditable':false});
		});
		page_is_edit=0;
	}else{
		$(this_obj).html('預覽');
		let css_area = '';
		$('.css_area').html(css_area);
		$('.contenteditable').each(function(index, value){
			$(value).attr({'contenteditable':true});
		});
		page_is_edit=1;
	}
	
}
//迷你按鈕
function btn_xs(){
	let html = $('.sucai .btn_xs').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//小型按鈕
function btn_sm(){
	let html = $('.sucai .btn_sm').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//單行輸入框
function btn_input_text(){
	let html = $('.sucai .btn_input_text').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//日期選擇
function btn_input_date(){
	let html = $('.sucai .btn_input_date').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//時間選擇
function btn_input_time(){
	let html = $('.sucai .btn_input_time').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//網頁純文字
function pagetxt(){
	layer.msg('純文字不僅可以放文字還可以直接貼上Word中的內容');
	let html = $('.sucai .pagetxt').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//複選框
function btn_checkbox(){
	let html = $('.sucai .btn_checkbox').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//下拉框
function btn_select(){
	layer.prompt({title: '請輸入預設值', formType:3}, function(pass, index){
		layer.close(index);
		let html = $('.sucai .btn_select').prop("outerHTML");
		html = html.replace('#value#',pass);
		$('.edit_page').append(html);
		on_action();
	});
}
//多行輸入框
function btn_textarea(){
	let html = $('.sucai .btn_textarea').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//提示條
function page_blockquote(){
	let html = $('.sucai .page_blockquote').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//進度條
function page_progress_bar(){
	layer.prompt({title: '請輸入1到100之間的數字', formType:3}, function(pass, index){
		layer.close(index);
		let html = $('.sucai .page_progress_bar').prop("outerHTML");
		html = html.replaceAll('#value#',pass+'%');
		$('.edit_page').append(html);
		on_action();
	});
}
//提示條
function page_timeline(){
	let html = $('.sucai .page_timeline').prop("outerHTML");
	$('.edit_page').append(html);
	on_action();
}
//上傳檔案
function page_upload(){
	layer.prompt({title: '請輸入文字', formType:3}, function(pass, index){
		layer.close(index);
		let html = $('.sucai .page_upload').prop("outerHTML");
		html = html.replaceAll('#value#',pass);
		$('.edit_page').append(html);
		on_action();
	});
}



//資料視覺化
function page_echart(){
	layer.prompt({title: '請輸入程式碼', formType:2, maxlength:9999}, function(codes, index){
		layer.close(index);
		let html = $('.sucai .page_echart').prop("outerHTML");//複製素材
		let idname =  Math.floor(Math.random()*100+1)+''+Math.floor(Math.random()*100+1)+''+Math.floor(Math.random()*100+1)+''+Math.floor(Math.random()*100+1);//生成class名
		html = html.replaceAll('#value#',idname);//替換class名
		html = html.replaceAll('#script#','<div class="script_code_area"></div>');//替換標籤
		$('.edit_page').append(html);
		run_echart(codes,idname);
		on_action();
	});
}
//生成檢視
function run_echart(script_code,id_name){
	let temp_script_code= $('.script_echart_area').val();//公共js程式碼存放的容器

	temp_script_code = temp_script_code.replaceAll('#id_name#','container_'+id_name);
	temp_script_code = temp_script_code.replaceAll('#script#',script_code);
	console.log(temp_script_code);
	eval(temp_script_code)
	$('#container_'+id_name).next(".script_code_area").html("<script>"+temp_script_code+"<\/script>");//寫入程式碼
}



$(".drag_ico").mousedown(function(){
	$(this).parent().parent().mousemove(function(event){
		$(this).css({"top":event.pageY-85,"left":event.pageX-15});
	});
});
$(".drag_ico").mouseup(function(){
	$(this).parent().parent().unbind('mousemove');//移除滑鼠移動事件
});
$(".del_ico").click(function(){
	$(this).parent().parent().remove();//移除元素
});
$(".box_area").mouseleave(function(){
	$(this).unbind('mousemove');//移除滑鼠移動事件
});
$(".box_area").mousedown(function(){
	$(".box_area").each(function(){
		$(this).css("z-index",1);
	});
	let ceng = Number($(this).css("z-index"))+1;
	$(this).css("z-index",ceng);
});

function on_action(){
	$(".drag_ico").on("mousedown",function(){
		$(this).parent().parent().mousemove(function(event){
			$(this).css({"top":event.pageY-85,"left":event.pageX-15});
		});
	});
	$(".drag_ico").on("mouseup",function(){
		$(this).parent().parent().unbind('mousemove');//移除滑鼠移動事件
	});
	$(".box_area").on("mouseleave",function(){
	  $(this).unbind('mousemove');//移除滑鼠移動事件
	});
	$(".del_ico").on("click",function(){
		$(this).parent().parent().remove();//移除元素
	});
	$(".box_area").on("mousedown",function(){
		$(".box_area").each(function(){
			$(this).css("z-index",1);
		});
		let ceng = Number($(this).css("z-index"))+1;
		$(this).css("z-index",ceng);
	});
}
</script>
</body>
</html>

　　

相關推薦

用於拖拽放置的前端程式碼

用於拖拽放置的前端程式碼 <!DOCTYPE html> <html> <head> <meta charset=\"utf-8\">

vue移動端寫的拖拽功能示例程式碼

相關知識點 touchstart 當在螢幕上按下手指時觸發 touchmove 當在螢幕上移動手指時觸發

前端開發者的福音！通過拖拽就可生成Vue程式碼的平臺來了！

Vue元件程式碼生成平臺 Vue元件程式碼生成平臺是一款面向Vue開發者的拖拽式元件程式碼生成工具。通過它可以快速搭建Vue元件的程式碼骨架結構。開發者可在此基礎上進行二次開發。

拖拽檔案顯示檔案路徑的vbs程式碼

下面兩段原理都是一樣的，大家可以看下 程式碼一 If wscript.Arguments.count=0 then msgbox \"拖拽檔案到本vbs檔案\",\"提示\"

JavaScript禁止右擊儲存圖片,禁止拖拽圖片的實現程式碼

下面先看下js禁止右擊儲存圖片。 禁止滑鼠右鍵儲存圖片 <img src=\"\" oncontextmenu=\"return false;\">

微信小程式拖拽排序列表的示例程式碼

拖拽排序列表 思路 介面分為兩層： 底層，正常列表展示，拖拽的時候不做處理（大牛直接加了動畫，原諒我技藝不精，還沒實現）

jQuery 實現DOM元素拖拽交換位置的例項程式碼

實現步驟 1.html + bootstrap 佈局畫3個面板。 注：面板樣式 position 屬性必須是絕對位置或者相對位置。

vue elementui tree 任意級別拖拽功能程式碼

我的是根據父級id做的一些判斷 <el-tree draggable :allow-drop=\"allowDrop\" @node-drop=\"sort\"

sortable 前端拖拽排序，後排處理

sortable.js 中文網http://www.sortablejs.com/index.html 下載：https://pan.baidu.com/s/1EFfwctub3LrVayWZ_HwqMg

原生js拖拽功能製作滑動條例項程式碼

拖拽屬於前端常見的功能，很多效果都會用到js的拖拽功能。滑動條的核心功能也就是使用js拖拽滑塊來修改位置。一個完整的滑動條包括 滑動條、滑動痕跡、滑塊、文字 等元素，先把html程式碼寫出來，如下所示：

一百多行程式碼實現react拖拽hooks

前言 原始碼總共也就一百多行，看完這個大致可以理解一些成熟的react拖拽庫的實現思路，比如react-dnd，然後你上手這些庫程式設計客棧的時候就非常快了。

【前端開發】基於vue的樹形結構table拖拽排序教程

安裝依賴drag-tree-table（更多文件見github） yarn adddrag-tree-table html <dragTreeTable ref=\"table\"

js拖拽完整程式碼示例

<!DOCTYPE html><html><head><meta charset=\"utf-8\" /><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\" /><title>dome</title><style>#dv

這款低程式碼SAAS資料視覺化工具，拖拽生成大屏，真香！

大屏資料視覺化資料在智慧城市、人口空間規劃、公共服務等領域發揮了積極的作用，更巨集觀、直觀、智慧地展示業務場景，讓資料智慧推動社會進步。現在市場上越來越多SAAS資料視覺化工具產品，那麼SAAS資料視覺化工具

騰訊表情拖拽專利獲授權，表情可隨意放置在訊息介面

1 月 25 日訊息，資訊顯示，1 月 25 日，騰訊科技（深圳）有限公司獲得“表情展示方法、裝置及計算機可讀儲存介質”專利授權。專利摘要顯示，本發明在進行表情展示時，支援在表情選取視窗進行選中的表情拖拽操作，且

unity ugui的拖拽與放置

1、建立一個工程 2、建立Panel(會自動建立Canvas 和EventSystem)，將Panel中的Image元件刪除，重新命名為MainPanel。

Unity UI拖拽模型選擇功能

指定一塊區域，玩家滑鼠or手指拖拽這個區域，模型會進行偏移，並用於進行人物、道具的選擇

JavaFX實現拖拽結點效果

在學校裡複習完資料結構的樹結構後，想使用 JavaFX 把樹給畫出來，其中樹的結點我希望做成可拖拽，這裡簡單記錄下 JavaFX 的滑鼠拖拽。

DragChartPanel可拖拽曲線應用詳解

DragChartPanel 是java cs架構中的一種圖形展現的開源元件。 業務需求需要用到DragChartPanel ，這是一種根據jtable表格中的資料給與展示的圖形元件。它和其他圖形元件區別再與它可以進行拖拽，使用者通過它不僅可以

java實現圖片滑動驗證(包含前端程式碼)

前言 1、下面是一個效果展示； 2、先抱怨一下，在部落格上面的抄襲真的非常嚴重，為了實現一個圖片滑動驗證，我搜索了挺久的資料，不過內容翻來覆去就是同樣的內容，千篇一律，作者還各不相同；內容相同我就不多說了