JavaScript如何實現九宮格拖拽效果
這篇文章主要介紹“JavaScript如何實現九宮格拖拽效果”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“JavaScript如何實現九宮格拖拽效果”文章能幫助大家解決問題。
代碼如下：
<!DOCTYPE?html>
<html>
????<head>
????????<meta?charset="UTF-8">
????????<title></title>
????????<style?type="text/css">
????????????body{
????????????????margin:?0;
????????????????padding:?0;
????????????}
????????????#wrap{
????????????????position:?relative;
????????????}
????????????#wrap?div{
????????????????position:?absolute;
????????????????width:?100px;
????????????????height:?100px;
????????????????font-size:?50px;
????????????????text-align:?center;
????????????????line-height:?100px;
????????????????border-radius:?10px;
????????????}
????????</style>
????</head>
????<body>
????????<div?id="wrap"></div>
????????<script?type="text/javascript">
????????????//生成結構
????????????var?oWrap?=?document.getElementById("wrap");
????????????var?mt?=?ml?=?10;
????????????for(var?i?=?0;?i?<?3;?i++){
????????????????for(var?j?=?0;?j?<?3;?j++){
????????????????????var?oDiv?=?document.createElement("div");
????????????????????oWrap.appendChild(oDiv);
????????????????????oDiv.style.top?=?i*(oDiv.offsetHeight?+?mt)?+?"px";
????????????????????oDiv.style.left?=?j*(oDiv.offsetWidth?+?ml)?+?"px";
????????????????????oDiv.style.backgroundColor?=?"rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")"
????????????????}
????????????}
????????????
????????????var?arr?=?"ABCDEFGHI";
????????????
????????????var?aItems?=?oWrap.children;
????????????var?len?=?aItems.length;
????????????
????????????for(var?i?=?0;?i?<?aItems.length;?i++){
????????????????aItems[i].innerHTML?=?arr[i];
????????????}
????????????//拖拽及交換位置
????????????
????????????for(var?i?=?0;?i?<?aItems.length;?i++){
????????????????aItems[i].onmousedown?=?function(e){
????????????????????var?evt?=?e?||?event;
????????????????????var?x?=?evt.offsetX;
????????????????????var?y?=?evt.offsetY;
????????????????????/*var?x?=?evt.clientX?-?this.offsetLeft?-?oWrap.offsetLeft;
????????????????????var?y?=?evt.clientY?-?this.offsetTop?-?oWrap.offsetTop;*/
????????????????????var?_this?=?this;
????????????????????
????????????????????var?cloneNode?=?this.cloneNode();
????????????????????cloneNode.style.border?=?'1px?dashed?#cecece';
????????????????????this.style.zIndex?=?1;
????????????????????oWrap.replaceChild(cloneNode,this);
????????????????????oWrap.appendChild(this);
????????????????????
????????????????????document.onmousemove?=?function(e){
????????????????????????var?evt?=?e?||?event;
????????????????????????var?_left?=?evt.clientX?-?x?-?oWrap.offsetLeft;
????????????????????????var?_top?=?evt.clientY?-?y?-?oWrap.offsetTop;
????????????????????????_this.style.left?=?_left?+?"px";
????????????????????????_this.style.top?=?_top?+?"px";
????????????????????????
????????????????????????return?false;
????????????????????}
????????????????????
????????????????????document.onmouseup?=?function(){
????????????????????????
????????????????????????//交換位置
????????????????????????var?disArr?=?[];
????????????????????????var?newArr?=?[];
????????????????????????console.log(aItems.length);
????????????????????????for(var?i?=?0;?i?<?len;?i++){
????????????????????????????var?disX?=?_this.offsetLeft?-?aItems[i].offsetLeft;
????????????????????????????var?disY?=?_this.offsetTop?-?aItems[i].offsetTop;
????????????????????????????var?dis?=?Math.sqrt(Math.pow(disX,2)+Math.pow(disY,2));
????????????????????????????disArr.push(dis);
????????????????????????????newArr.push(dis);
????????????????????????}
????????????????????????disArr.sort(function(a,b){
????????????????????????????return?a-b;
????????????????????????})
????????????????????????var?minIndex?=?newArr.indexOf(disArr[0]);
????????????????????????
????????????????????????_this.style.left?=?aItems[minIndex].style.left;
????????????????????????_this.style.top?=?aItems[minIndex].style.top;
????????????????????????aItems[minIndex].style.left?=?cloneNode.style.left;
????????????????????????aItems[minIndex].style.top?=?cloneNode.style.top;
????????????????????????oWrap.removeChild(cloneNode);
????????????????????????document.onmousemove?=?null;
????????????????????????document.onmouseup?=?null;
????????????????????}
????????????????}
????????????}
????????????/*var?arr?=?[45,32,11,90];
????????????var?minVal?=?Math.min.apply(null,arr);
????????????var?minIndex?=?arr.indexOf(minVal);
????????????console.log(minVal,arr,minIndex);*/
????????</script>
????</body>
</html>
效果圖
關于“JavaScript如何實現九宮格拖拽效果”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注蝸牛博客行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：niceseo99@gmail.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
版權聲明：如無特殊標注，文章均為本站原創，轉載時請以鏈接形式注明文章出處。
評論