Javascript基於jQuery UI實現選中區域拖拽效果

時間 2019-11-13

標籤 javascript 基於 jquery 實現選中區域效果欄目 JavaScript 简体版

原文原文鏈接

這篇文章主要介紹了Javascript基於jQuery UI實現選中區域拖拽效果的相關資料,很是不錯，具備參考借鑑價值，須要的朋友能夠參考下css

1、效果展現jquery

普通的三個divgit

鼠標拖動選中效果github

選中全部的div動畫

這樣貌似看不出效果，不要緊，咱們有神奇的gif動畫，來一個總體的動畫效果感覺下。ui

2、代碼實現this

整個代碼其實也不難，須要用到一個博主本身封裝的js文件。spa

AreaSelect.jscode

考慮到代碼量有點大，而且知乎沒有代碼摺疊功能，因此這裏就留一個文件名。等博主抽時間將它開源到github上面去，固然，有須要的朋友也能夠直接聯繫博主，博主免費提供！ip

引入這個js後，還須要引用jquery和jquery UI相關文件。

<script src="Scripts/jquery-1.10.2.js"></script>

<script src="Content/jquery-ui-1.11.4.custom/jquery-ui.js"></script>

<link href="Content/jquery-ui-1.11.4.custom/jquery-ui.min.css" rel="stylesheet" />

<script src="Scripts/Common/SelectArea.js"></script>

<body>

<div id="divCenter">

<div id="div1" style="position:absolute;width:200px;height:150px;left:200px;top:50px;cursor:pointer;">div2</div>

<div id="div2" style="position:absolute;width:200px;height:150px;left:450px;top:200px;cursor:pointer;">div2</div>

<div id="div3" style="position:absolute;width:200px;height:150px;left:700px;top:390px;cursor:pointer;">div3</div>

</div>

</body>

$(function () {

$("#divCenter div").draggable({

scope: "plant",

start: function () {

startMove();

},

drag: function (event, ui) {

MoveSelectDiv(event, ui, $(this).attr("id"));

},

});

oRegionSelect = new RegionSelect({

region: '#divCenter div',

selectedClass: 'seled',

parentId: "divCenter"

});

oRegionSelect.select();

});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。