整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
示HTML5中的拖曳操作代碼詳見教材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)); //根據經緯度坐標展示全景圖
panorama.setPov({heading: -40, pitch: 6});
//全景圖位置改變后，普通地圖中心點也隨之改變
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>
目前重點放在別的東西上，所以這個插件不再更新，只能用于pc端，移動端自己可以fork進行優化。
yarn add vue-dragging
普通html
<script src="./vue.js"></script>
<script src="./vue-drag.min.js"></script>是vue-drag.js不是vue-dragging.js
如果你的項目使用vue-cli搭建的 那么請這樣使用:
import Vue from 'vue'
import vueDrag from 'vue-dragging'
Vue.use(vueDrag)在html當中添加標簽，然后添加一個'v-drag'，假設為：
<div class="demo">
<div class="drag" v-drag></div>
</div>這樣綁定的dom就可以拖拽
加入了一個可拖拽區域和不可拖區域的方法，示例如下:
<div class="demo2" v-drag="'#dragable'">
<div id="dragable"><span>這里可以拖動</span></div>
<div class="content"><span>這里不可以</span></div>
</div>value傳的是一個選擇器，會讓當前dom下第一個找到的seletor允許拖拽
如果你想讓鼠標指針變成move，那么這樣：
<div class="demo2" v-drag.cursor="'#dragable'">
<div id="dragable"><span>這里可以拖動</span></div>
<div class="content"><span>這里不可以</span></div>
</div>當然你也可以自己寫樣式去替換
端拖拽技術是一項非常具有實用性和發展潛力的技術，有望在未來的項目中得到更加廣泛的應用和推廣。
要實現拖拽，你需要掌握以下幾個知識點：
HTML5 Drag and Drop API
JavaScript事件監聽
CSS3布局
jQuery（可選）
當你掌握了這些知識后，可以開始著手開發這個項目。
<!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 實現元素的拖拽功能。該 API 提供了 3 個事件：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');
});
});這段代碼中，我們定義了一個 dragElement 變量用于存儲被拖動的元素，我們在 dragstart 事件中記錄該元素。在 dragover 事件中，取消默認行為，并添加樣式類 over，用于表示當前元素是可放置的。當元素離開了可放置的區域時（dragleave事件），我們需要移除 over 類。最后，當元素被放置到目標區域時（drop 事件），我們將該元素追加到目標容器內，并移除所有 over 樣式類。
現在我們已經能夠讓元素在頁面上拖拽了，但是我們怎么實現拖拽的元素呢？對于可拖拽的元素，一般來說，我們會將該元素封裝到一個元素中，將這個父元素設置為可拖拽的。
<div class="item draggable">
<h2>標題</h2>
<p>這里是內容</p>
</div>我們需要實現動態添加元素的功能。為了讓項目更有可操作性，我們可以在頁面上增加一個添加按鈕。
<div class="toolbar">
<button class="add-item">添加</button>
</div>下面我們來實現添加功能。
$(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>標題</h2><p>這里是內容</p></div>');
});
});在這段代碼中，我們首先定義了一個變量： dragElement ，用于記錄當前被拖拽的元素。添加按鈕的 click 事件中，將一個新的元素添加到 container 容器中。
我們需要對元素的樣式和布局進行設計。我們可以先定義一些基本的樣式，然后通過 CSS3 的 flexbox 布局進行排列。
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 元素的鼠標指針樣式設置為 move，表示該元素可以拖拽。
如果您想要實現不選中文本即可拖拽組件，您需要為每個組件的 draggable 屬性設置為 true 才可以。
<div class="item" draggable="true">
<h2>標題</h2>
<p>這里是內容</p>
</div>通過以上的實現過程可以深入了解到 HTML5 Drag and Drop API、JavaScript 事件監聽、CSS3布局、jQuery 庫的使用等知識。此外，通過實際操作演示，進一步了解前端拖拽開發的工作原理和技術知識點。
期望本文的內容對您的學習和工作有所幫助，如果您有其他問題或建議，歡迎在評論區留言。
人人為我，我為人人，謝謝您的瀏覽，我們一起加油吧。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
