jquery實現(xiàn)九宮格大轉盤抽獎
634
2024-03-21
本文實例講述了jQuery動態(tài)添加可拖動元素的方法。分享給大家供大家參考，具體如下：
運行效果截圖如下：
具體代碼如下：
index.html：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>流程設計器</title> <script type = "text/javascript" src = "http://www.gimoo.net/t/1902/jquery-1.7.2.min.js"> </script> <script type = "text/javascript" src="http://www.gimoo.net/t/1902/drag.js"></script> <link type = "text/css" rel="stylesheet"></link> </head> <body> <div id = "console"> <div id = "menubar"> <input type = "button" value = "添加節(jié)點" hidefocus = "true" id = "addItem"/> </div> <div id = "nodesContainer"></div> </div> </body> </html>
ProcessDesigner.css:
body {
padding:0;
margin:0
}
#console{
width:500px;
height:300px;
background:#eee;
margin:10px auto;
border:5px solid #000;
}
#menubar{
width:100%;
height:30px;
background:#333;
line-height:30px;
vertical-align:middle;
}
#addItem{
wdith:50px;
height:20px;
color:#fff;
background:#555;
border:0;
line-height:20px;
margin-left:5px;
border-radius:5px;
_margin-top:4px;
}
#nodesContainer{
width:100%;
height:270px;
background:#eee;
}
drag.js:
/**
* @author Administrator
*/
$(function(){
$("#addItem").click(function(){
var obj = document.getElementById("nodesContainer");
createNode(obj);
})
})
function createNode(parentNode){
var left = document.getElementById("nodesContainer").offsetLeft+10;
var top = document.getElementById("nodesContainer").offsetTop+10;
var newNode = document.createElement("div");
newNode.style.position = "absolute";
newNode.style.width = "20px";
newNode.style.height = "20px";
newNode.style.top = top+"px";
newNode.style.left = left+"px";
newNode.style.borderRadius = "50px";
newNode.style.background = "blue";
parentNode.appendChild(newNode);
doDrag(newNode);
}
/*
* @param {Object} obj: If obj is a string,convert it to an obj;
* @param {number} initWidth: Initial Width of obj;
* @param {number} initHeight:Initial Height of obj;
* @param {number} initLeft:Initial Left of obj;
* @param {number} initTop:Initial Top of obj;
*/
function doDrag(obj, initWidth, initHeight, initLeft, initTop){
var posX;
var posY;
var dragable;
if (typeof obj == "string")
obj = document.getElementById(obj);
if(initWidth)obj.style.width = initWidth + "px";
if(initHeight)obj.style.height = initHeight + "px";
if(initLeft)obj.style.left = initLeft + "px";
if(initTop)obj.style.top = initTop + "px";
obj.onmousedown = function(event){
down(event);
}
obj.onmouseup = function(){
up();
}
function down(e){
e = e || window.event;
posX = e.clientX - obj.offsetLeft; //offsetLeft is a readonly property
posY = e.clientY - obj.offsetTop;
dragable = true;
document.onmousemove = move;
//$(obj).wrap("<div style = 'position:relative;border:1px solid red;width:300px;height:50px'></div>")
}
function move(ev){
if (dragable) {
ev = ev || window.event;//如果是IE
obj.style.left = (ev.clientX - posX) + "px";
obj.style.top = (ev.clientY - posY) + "px";
}
}
function up(){
//$(obj).unwrap();
dragable = false;
};
}
完整實例代碼點擊此處本站下載。
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jQuery常用插件及用法總結》、《jquery中Ajax用法總結》、《jQuery擴展技巧總結》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
