整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
示HTML5中的拖曳操作代碼詳見(jiàn)教材demo3-8
<!DOCTYPE html>
<html>
<head>
<title>全景圖</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=4qXTGvclMqTZXkLsU3twnMA7">
</script>
<style type="text/css">
body, html{
width: 100%;
height: 100%;
overflow: hidden;
margin:0;
font-family:"微軟雅黑";
}
#panorama {
height: 100%;
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="panorama"></div>
<script type="text/javascript">
var jd="116.349902";
var wd="40.065817";
//全景圖展示
var panorama = new BMap.Panorama('panorama');
panorama.setPosition(new BMap.Point(jd, wd)); //根據(jù)經(jīng)緯度坐標(biāo)展示全景圖
panorama.setPov({heading: -40, pitch: 6});
//全景圖位置改變后，普通地圖中心點(diǎn)也隨之改變
panorama.addEventListener('position_changed', function(e){
var pos = panorama.getPosition();
map.setCenter(new BMap.Point(pos.lng, pos.lat));
marker.setPosition(pos);
});
</script>
</body>
</html>
目前重點(diǎn)放在別的東西上，所以這個(gè)插件不再更新，只能用于pc端，移動(dòng)端自己可以fork進(jìn)行優(yōu)化。
yarn add vue-dragging
普通html
<script src="./vue.js"></script>
<script src="./vue-drag.min.js"></script>是vue-drag.js不是vue-dragging.js
如果你的項(xiàng)目使用vue-cli搭建的 那么請(qǐng)這樣使用:
import Vue from 'vue'
import vueDrag from 'vue-dragging'
Vue.use(vueDrag)在html當(dāng)中添加標(biāo)簽，然后添加一個(gè)'v-drag'，假設(shè)為：
<div class="demo">
<div class="drag" v-drag></div>
</div>這樣綁定的dom就可以拖拽
加入了一個(gè)可拖拽區(qū)域和不可拖區(qū)域的方法，示例如下:
<div class="demo2" v-drag="'#dragable'">
<div id="dragable"><span>這里可以拖動(dòng)</span></div>
<div class="content"><span>這里不可以</span></div>
</div>value傳的是一個(gè)選擇器，會(huì)讓當(dāng)前dom下第一個(gè)找到的seletor允許拖拽
如果你想讓鼠標(biāo)指針變成move，那么這樣：
<div class="demo2" v-drag.cursor="'#dragable'">
<div id="dragable"><span>這里可以拖動(dòng)</span></div>
<div class="content"><span>這里不可以</span></div>
</div>當(dāng)然你也可以自己寫樣式去替換
端拖拽技術(shù)是一項(xiàng)非常具有實(shí)用性和發(fā)展?jié)摿Φ募夹g(shù)，有望在未來(lái)的項(xiàng)目中得到更加廣泛的應(yīng)用和推廣。
要實(shí)現(xiàn)拖拽，你需要掌握以下幾個(gè)知識(shí)點(diǎn)：
HTML5 Drag and Drop API
JavaScript事件監(jiān)聽(tīng)
CSS3布局
jQuery（可選）
當(dāng)你掌握了這些知識(shí)后，可以開(kāi)始著手開(kāi)發(fā)這個(gè)項(xiàng)目。
<!DOCTYPE html>
<html>
<head>
<title>JS前端拖拽DEMO</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="container"></div>
</body>
</html>我們需要利用 HTML5 Drag and Drop API 實(shí)現(xiàn)元素的拖拽功能。該 API 提供了 3 個(gè)事件：dragstart、dragover 和 drop。
$(function() {
var dragElement = null;
$('.container')
.on('dragstart', '.draggable', function(event){
dragElement = event.target;
})
.on('dragover', function(event){
event.preventDefault();
$(event.target).addClass('over');
})
.on('dragleave', function(event){
event.preventDefault();
$(event.target).removeClass('over');
})
.on('drop', function(event){
event.preventDefault();
$(event.target).append(dragElement);
$('.container').find('*').removeClass('over');
});
});這段代碼中，我們定義了一個(gè) dragElement 變量用于存儲(chǔ)被拖動(dòng)的元素，我們?cè)?dragstart 事件中記錄該元素。在 dragover 事件中，取消默認(rèn)行為，并添加樣式類 over，用于表示當(dāng)前元素是可放置的。當(dāng)元素離開(kāi)了可放置的區(qū)域時(shí)（dragleave事件），我們需要移除 over 類。最后，當(dāng)元素被放置到目標(biāo)區(qū)域時(shí)（drop 事件），我們將該元素追加到目標(biāo)容器內(nèi)，并移除所有 over 樣式類。
現(xiàn)在我們已經(jīng)能夠讓元素在頁(yè)面上拖拽了，但是我們?cè)趺磳?shí)現(xiàn)拖拽的元素呢？對(duì)于可拖拽的元素，一般來(lái)說(shuō)，我們會(huì)將該元素封裝到一個(gè)元素中，將這個(gè)父元素設(shè)置為可拖拽的。
<div class="item draggable">
<h2>標(biāo)題</h2>
<p>這里是內(nèi)容</p>
</div>我們需要實(shí)現(xiàn)動(dòng)態(tài)添加元素的功能。為了讓項(xiàng)目更有可操作性，我們可以在頁(yè)面上增加一個(gè)添加按鈕。
<div class="toolbar">
<button class="add-item">添加</button>
</div>下面我們來(lái)實(shí)現(xiàn)添加功能。
$(function() {
var dragElement = null;
$('.container')
.on('dragstart', '.draggable', function(event){
dragElement = event.target;
})
.on('dragover', function(event){
event.preventDefault();
$(event.target).addClass('over');
})
.on('dragleave', function(event){
event.preventDefault();
$(event.target).removeClass('over');
})
.on('drop', function(event){
event.preventDefault();
$(event.target).append(dragElement);
$('.container').find('*').removeClass('over');
});
$('.add-item').click(function(){
$('.container').append('<div class="item draggable"><h2>標(biāo)題</h2><p>這里是內(nèi)容</p></div>');
});
});在這段代碼中，我們首先定義了一個(gè)變量： dragElement ，用于記錄當(dāng)前被拖拽的元素。添加按鈕的 click 事件中，將一個(gè)新的元素添加到 container 容器中。
我們需要對(duì)元素的樣式和布局進(jìn)行設(shè)計(jì)。我們可以先定義一些基本的樣式，然后通過(guò) CSS3 的 flexbox 布局進(jìn)行排列。
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-wrap: wrap;
padding: 20px;
}
.item {
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
padding: 20px;
margin: 10px;
flex-basis: calc(33.33% - 20px);
max-width: calc(33.33% - 20px);
text-align: center;
}
.item h2 {
margin: 0;
font-size: 16px;
}
.item p {
margin: 10px 0;
font-size: 14px;
line-height: 1.5;
}
.draggable {
cursor: move;
}在這段代碼中，我們定義了 container 容器和 item 元素的樣式。我們還將 .draggable 元素的鼠標(biāo)指針樣式設(shè)置為 move，表示該元素可以拖拽。
如果您想要實(shí)現(xiàn)不選中文本即可拖拽組件，您需要為每個(gè)組件的 draggable 屬性設(shè)置為 true 才可以。
<div class="item" draggable="true">
<h2>標(biāo)題</h2>
<p>這里是內(nèi)容</p>
</div>通過(guò)以上的實(shí)現(xiàn)過(guò)程可以深入了解到 HTML5 Drag and Drop API、JavaScript 事件監(jiān)聽(tīng)、CSS3布局、jQuery 庫(kù)的使用等知識(shí)。此外，通過(guò)實(shí)際操作演示，進(jìn)一步了解前端拖拽開(kāi)發(fā)的工作原理和技術(shù)知識(shí)點(diǎn)。
期望本文的內(nèi)容對(duì)您的學(xué)習(xí)和工作有所幫助，如果您有其他問(wèn)題或建議，歡迎在評(píng)論區(qū)留言。
人人為我，我為人人，謝謝您的瀏覽，我們一起加油吧。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
