一个DIV拖放的案例

2013-06-07 14:01 Evan.Pei 阅读(309) 评论(0) 编辑收藏举报

2013/6/6-2013/6/7研究心得记录一下

效果图：

一.aspx页面

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <link href="Style1.css" type="text/css" rel="stylesheet" />
    <script src="jq/JScript3.js" type="text/javascript"></script>
    <script src="jq/JScript1.js" type="text/javascript"></script>
    <script src="jq/jquery-1.3.2.js" type="text/javascript">
    </script>
</head>
<body onload="PageLoad(4,6);"> 
        <div id='div_Content' style=" text-align:center;">   
        </div>
</body>
</html>
<script type="text/javascript">
    setTimeout(a,100);
    function a(){
        $('#m_1_5').css('height', '200px');
        $('#m_2_5').css('height', '200px');
        $('#m_3_5').css('height', '200px');
    }
</script>

二。style1.css

body {   
width:100%;   
max-height:100%;   
padding:0px;   
margin:0px;   
text-align:center;   
}   
.cell {   
float:left;    /*float 属性定义元素在哪个方向浮动*/
clear:right;   /*clear 属性规定元素的哪一侧不允许其他浮动元素*/
}   
   
.row {   
clear:both;  /*在左右两侧均不允许浮动元素*/  
}   
   
.r_nbsp {   
/*width:200px;   */
}   
   
.root {   
/*width:1010px;*/
/*margin: 0 auto;   /*margin 简写属性在一个声明中设置所有外边距属性*/
}   
   
.root * {   
/*次属性FF的说*/ 
-moz-user-select:none;   
}   
   
.line {   
width:202px;
line-height:20px;   
height:20px;   
overflow:hidden;   
font-size:12px;   
}   
   
.move {   
border:#CCCCCC 1px solid;   
width:200px;   
/*height:20px;*/  
}   
   
.title {   
cursor:move;   
/*background:#0080C0;*/  
font-size:13px;   
font-weight:bold;   
color:#FFFFFF;   
line-height:24px;   
text-align:center;   
}   
   
.content {   
border-top:#CCCCCC 1px solid;   
  
background-color:#F7F7F7;   
}   
   
.CDrag_temp_div {   
border:orange 1px dashed;   
} 

三。JScript1.js

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

//var div1 = null;
//var div2 = null;
 
var Class =
{
    //创建类   
    create: function() {
        return function() {
            this.initialize.apply(this, arguments);
        };
    }
};
 
var $A = function(a) {
    //转换数组   
    return a ? Array.apply(null, a) : new Array;
};
 
var $$ = function(id) {
    //获取对象   
    return document.getElementById(id);
};
 
Object.extend = function(a, b) {
    //追加方法   
    for (var i in b) a[i] = b[i];
    return a;
};
 
Object.extend(Object, {
    addEvent: function(a, b, c, d) {
        //添加函数   
        if (a.attachEvent) a.attachEvent(b[0], c); //attachEvent("onclick", buttonClicked);   //给按钮增加事件   
        else a.addEventListener(b[1] || b[0].replace(/^on/, ""), c, d || false);
        return c;
    },
 
    delEvent: function(a, b, c, d) {
        if (a.detachEvent) a.detachEvent(b[0], c);
        else a.removeEventListener(b[1] || b[0].replace(/^on/, ""), c, d || false);
        return c;
    },
    //---------------------------------------获取Event  
    reEvent: function() {
        //获取Event   
        return window.event ? window.event : (function(o) {
            do {
                o = o.caller;
            } while (o && !/^\[object[ A-Za-z]*Event\]$/.test(o.arguments[0]));
            return o.arguments[0];
        })(this.reEvent);
    }
 
});
 
Function.prototype.bind = function() {
    //绑定事件   
    var wc = this, a = $A(arguments), o = a.shift();
    return function() {
        wc.apply(o, a.concat($A(arguments)));
    };
};
 
/////////////////////////////////////////////////////////////  
var Table = Class.create();
Table.prototype = {
    //---------------------------------------初始化  
    initialize: function() {
        //初始化   
        var wc = this;
        wc.cols = new Array; //创建列   
    },
 
 
    //---------------------------------------添加列  
    addCols: function(o) //o代表列
    {
        //添加列   
        var wc = this,
        cols = wc.cols,
        i = cols.length;
        return cols[i] = {
            id: i, div: o, rows: new Array, //创建行   
            addRow: wc.addRow,
            chRow: wc.chRow,
            inRow: wc.inRow,
            delRow: wc.delRow
        };
    },
 
 
    //---------------------------------------添加行   
    addRow: function(o) {
        //添加行   
        var wc = this,
        rows = wc.rows,
        i = rows.length;
        return rows[i] = {
            id: i, div: o, cols: wc
        };
    },
 
 
    //---------------------------------------插入行   
    inRow: function(a, b) {
        //插入行   
        var wc = b.cols = this,
            rows = wc.rows, i;
        if (a < rows.length) {
            for (i = a; i < rows.length; i++)
                rows[i].id++;
            rows.splice(a, 0, b);
            b.id = a;
            return b;
        }
        else {
            b.id = rows.length;
            return rows[b.id] = b;
        }
    },
 
 
    //---------------------------------------删除列 
    delRow: function(a) {
        //删除列   
        var wc = this,
        rows = wc.rows,
        i, r;
        if (a >= rows.length) return;
        r = rows[a];
        rows.splice(a, 1);
        for (i = a; i < rows.length; i++) rows[i].id = i;
        return r;
    }
};
 
//////////////////////////////////////////////////////////////
var CDrag = Class.create();
CDrag.IE = /MSIE/.test(window.navigator.userAgent);
CDrag.prototype = {
    //---------------------------------------初始化成员  
    initialize: function() {
        //初始化成员   
        var wc = this; //this指类CDrag
        wc.table = new Table; //建立表格对象 ,wc.table属性的值是Table类
        wc.iFunc = null;
        wc.eFunc = null; //新建两个属性值都为空
        wc.obj = {//wc.obj属性是对象
            on: { a: null, b: "" },
            row: null, left: 0, top: 0
        };
 
        wc.temp = { row: null, div: document.createElement("div") }; //wc.temp对象
        wc.temp.div.setAttribute(CDrag.IE ? "className" : "class", "CDrag_temp_div"); //根据浏览器设置div类样式 ,wc.temp对象中的div属性
        wc.temp.div.innerHTML = "<div id='vv' style='position:absolute;'> </div>"; //将内容设置为空
        wc.temp.div.style.textAlign = "left"; ////////////+
    },
 
    //---------------------------------------获取鼠标位置，鼠标单击层时触发,该方法返回鼠标的xy轴的位置 
    reMouse: function(a) {
        //获取鼠标位置   
        var e = Object.reEvent(); //被单击的层
        return {
            x: document.documentElement.scrollLeft + e.clientX, //获取鼠标单击X轴的位置   
            y: document.documentElement.scrollTop + e.clientY  //获取鼠标单击Y轴的位置 
        };
    },
 
 
 
    //---------------------------------------获取元素绝对位置    
    rePosition: function(o) {  //参数是div 
        //获取元素绝对位置   
        var $x = $y = 0;
        do {
            $x += o.offsetLeft;
            $y += o.offsetTop;
        } while ((o = o.offsetParent) && o.tagName != "BODY");
        return { x: $x, y: $y };
    },
 
 
    //---------------------------------------单击行时触发
    sMove: function(o) {
        //当拖动开始时设置参数   
        var wc = this;
        if (wc.iFunc || wc.eFinc) return;
        var mouse = wc.reMouse(), //调用方法获取鼠标的位置
                temp = wc.temp, //对象
                div = o.div, //当前活动的DIV
                position = wc.rePosition(div); //获取该活动的DIV的xy的位置
 
        obj = wc.obj, //对象，现在是空的，用来记录活动的层的信息
                obj.row = o; //o是addRow返回的对象
        obj.on.b = "me";
        obj.left = mouse.x - position.x;   //赋值，鼠标的位置-层的位置 X
        obj.top = mouse.y - position.y;
        temp.row = document.body.appendChild(div.cloneNode(true)); //复制预拖拽对象,克隆div 
 
        //------1
        with (temp.row.style) {//设置被拖拽DIV的样式
            //设置复制对象
            position = "absolute"; //设置绝对位置
            left = mouse.x - obj.left + "px";
            top = mouse.y - obj.top + "px";
            zIndex = 100;
            opacity = "0.3";
            filter = "alpha(opacity:50)"; //透明
        }
        //-------2 
        with (temp.div.style) {//div的高度和宽度,空div的样式
            //设置站位对象
            height = div.clientHeight + "px";
            width = div.clientWidth + "px";
            //background = "Orange";//占位背景色
        }
        //------3
        /*div.parentNode.insertBefore(temp.div, div);  
        div.style.display = "none"; //隐藏预拖拽对象*/
        div.parentNode.replaceChild(temp.div, div); //新的DIV替换了之前的div  
        //------4
        wc.iFunc = Object.addEvent(document, ["onmousemove"], wc.iMove.bind(wc)); //开始拖动时的事件，addEvent添加事件,addEvent( object, eventType, function );    
        wc.eFunc = Object.addEvent(document, ["onmouseup"], wc.eMove.bind(wc));  //鼠标释放的事件
        document.onselectstart = new Function("return false"); //鼠标单击后不能做任何事
        //------5
    },
 
 
 
    //---------------------------------------当鼠标移动时设置参数  
    iMove: function() {
        //当鼠标移动时设置参数   
        var wc = this, //this=CDrag
                        cols = wc.table.cols, //获取当前的列数
                        mouse = wc.reMouse(), //鼠标的位置
                        obj = wc.obj, //对象,记录着活动的层的信息
                        temp = wc.temp,
                        row = obj.row, //
                        div = temp.row, //克隆后的div   
                        t_position,
                        t_cols,
                        t_rows,
                        i,
                        j;
        //设置div随着鼠标移动  
        with (div.style) {
            left = mouse.x - obj.left + "px";
            top = mouse.y - obj.top + "px";
        }
        //循环所有列
        for (i = 0; i < cols.length; i++) {
            t_cols = cols[i]; //当前列
            t_position = wc.rePosition(t_cols.div); //获取整列div元素的位置  
            //确保鼠标在这几列的范围内移动
            if (t_position.x < mouse.x && t_position.x + t_cols.div.offsetWidth > mouse.x)//div的x小于鼠标的x && 元素x+
            {
                if (t_cols.rows.length > 0) {
                    //如果此列行数大于0   
                    if (wc.rePosition(t_cols.rows[0].div).y + 20 > mouse.y) //第一列的高度+20>鼠标的高度
                    {
                        //alert(wc.rePosition(t_cols.rows[0].div).y+'鼠标y:'+mouse.y);
                        //如果鼠标位置大于第一行的位置即是最上。。   
                        //向上   
                        obj.on.a = t_cols.rows[0]; //列里面的第一行   
                        obj.on.b = "up";
                        obj.on.a.div.parentNode.insertBefore(temp.div, obj.on.a.div);
                        //temp.div(之前创建的空div),obj.on.a.div(最上面的div)先获取父节点m_1,m_2,在将其添加到最前面  
                        //oNewNode :　 必选项。对象(Element)。要被插入文档结构的对象。
                        //oChildNode :　 可选项。对象(Element)。定位插入点。 oNewNode 被插入到紧贴这个子对象的前面 
                    }
                    //此列的行数大于一        第一行就是被克隆的那行   只要鼠标移过第二行
                    else if (t_cols.rows.length > 1 && t_cols.rows[0] == row && wc.rePosition(t_cols.rows[1].div).y + 20 > mouse.y) {
                        //如果第一行是拖拽对象而第鼠标大于第二行位置则，没有动。。   
                        //向上   
                        obj.on.b = "me";
                        t_cols.rows[1].div.parentNode.insertBefore(temp.div, t_cols.rows[1].div);
                    }
                    else {      //循环所有列的行
                        for (j = t_cols.rows.length - 1; j > -1; j--) {
                            //重最下行向上查询   
                            t_rows = t_cols.rows[j];
                            if (t_rows == obj.row) { continue; } //如果是同一行 
 
                            if (wc.rePosition(t_rows.div).y < mouse.y) {
                                //如果鼠标大于这行则在这行下面   
                                if (t_rows.id + 1 < t_cols.rows.length && t_cols.rows[t_rows.id + 1] != obj.row) {
                                    //如果这行有下一行则重这行下一行的上面插入   
                                    t_cols.rows[t_rows.id + 1].div.parentNode.
                                                                                                                                                        insertBefore(temp.div, t_cols.rows[t_rows.id + 1].div);
                                    obj.on.a = t_rows;
                                    obj.on.b = "down";
                                }
                                else if (t_rows.id + 2 < t_cols.rows.length) {
                                    //如果这行下一行是拖拽对象则插入到下两行，即拖拽对象返回原位   
                                    t_cols.rows[t_rows.id + 2].div.parentNode.
                                                                                                                                                        insertBefore(temp.div, t_cols.rows[t_rows.id + 2].div);
                                    obj.on.b = "me";
                                }
                                else {
                                    //前面都没有满足则放在最低行   
                                    t_rows.div.parentNode.appendChild(temp.div);
                                    obj.on.a = t_rows;
                                    obj.on.b = "down";
                                }
                                return;
                            }
                        }
                    }
                }
                else {
                    //此列无内容添加新行   
                    t_cols.div.appendChild(temp.div);
                    obj.on.a = t_cols;
                    obj.on.b = "new";
                }
            }
        }
    },
    //---------------------------------------当鼠标释放时设置参数
    eMove: function() {
        //当鼠标释放时设置参数   
        var wc = this,
            obj = wc.obj, //记录正活动div的信息
            temp = wc.temp,
            row = obj.row,
            div = row.div, //拖动的div
            o_cols,
            n_cols;
        div1 = temp.row;
        div2 = temp.div; //占位div
        //alert(temp.row.offsetTop + ',' + zhanwei.offsetTop);(temp.row,zhanwei)
        var div2_y = div2.offsetTop;
        var div2_x = document.getElementById('vv').offsetLeft; //div2.offsetLeft;
 
        var div1_Id = div1.id;
        Object.delEvent(document, ["onmousemove"], wc.iFunc);
        $("#" + div1_Id).animate({ left: div2_x, top: div2_y }, function() {
            if (obj.on.b == "up") {
                //向最上添加   
                o_cols = obj.row.cols;
                n_cols = obj.on.a.cols;
                n_cols.inRow(0, o_cols.delRow(obj.row.id));
            }
            else if (obj.on.b == "down") {
                //相对向下添加   
                o_cols = obj.row.cols;
                n_cols = obj.on.a.cols;
                n_cols.inRow(obj.on.a.id + 1, o_cols.delRow(obj.row.id));
            }
            else if (obj.on.b == "new") {
                //向无内容列添加   
                o_cols = obj.row.cols;
                n_cols = obj.on.a;
                n_cols.inRow(0, o_cols.delRow(obj.row.id));
            }
            temp.div.parentNode.replaceChild(div, temp.div); //div替换temp.div
            temp.row.parentNode.removeChild(temp.row);
            delete temp.row;
            //Object.delEvent(document, ["onmousemove"], wc.iFunc);
            Object.delEvent(document, ["onmouseup"], wc.eFunc);
            document.onselectstart = wc.iFunc = wc.eFunc = null;
 
        });
        //        oTimer = setInterval(
        //           function() {
        //               var isContinue = false;
        //               var div1_y = div1.offsetTop;
        //               var div1_x = div1.offsetLeft;
        //               var div2_y = div2.offsetTop;
        //               var div2_x = document.getElementById('vv').offsetLeft; //div2.offsetLeft;
        //               var x1 = 0;
        //               var y1 = 0;
 
        //               if (div1_x > div2_x) {
        //                   if (div1_x - div2_x <= 20) {
        //                       div1.style.left = div1.offsetLeft - 1 + "px"; isContinue = true;
        //                   } else {
        //                       div1.style.left = div1.offsetLeft - 20 + "px"; isContinue = true;
        //                   }
        //               } else if (div1_x < div2_x) {
        //                   if (div2_x - div1_x <= 20) {
        //                       div1.style.left = div1.offsetLeft + 1 + "px"; isContinue = true;
        //                   } else {
        //                       div1.style.left = div1.offsetLeft + 20 + "px"; isContinue = true;
        //                   }
        //               }
        //               if (div1_y > div2_y) {
        //                   if (div1_y - div2_y <= 20) {
        //                       div1.style.top = div1.offsetTop - 1 + "px"; isContinue = true;
        //                   } else {
        //                       div1.style.top = div1.offsetTop - 20 + "px"; isContinue = true;
        //                   }
        //               } else if (div1_y < div2_y) {
        //                   if (div2_y - div1_y <= 20) {
        //                       div1.style.top = div1.offsetTop + 1 + "px"; isContinue = true;
        //                   } else {
        //                       div1.style.top = div1.offsetTop + 20 + "px"; isContinue = true;
        //                   }
        //               }
        //               if (!isContinue) {
        //                   window.clearInterval(oTimer);
        //                   if (obj.on.b == "up") {
        //                       //向最上添加   
        //                       o_cols = obj.row.cols;
        //                       n_cols = obj.on.a.cols;
        //                       n_cols.inRow(0, o_cols.delRow(obj.row.id));
        //                   }
        //                   else if (obj.on.b == "down") {
        //                       //相对向下添加   
        //                       o_cols = obj.row.cols;
        //                       n_cols = obj.on.a.cols;
        //                       n_cols.inRow(obj.on.a.id + 1, o_cols.delRow(obj.row.id));
        //                   }
        //                   else if (obj.on.b == "new") {
        //                       //向无内容列添加   
        //                       o_cols = obj.row.cols;
        //                       n_cols = obj.on.a;
        //                       n_cols.inRow(0, o_cols.delRow(obj.row.id));
        //                   }
        //                   temp.div.parentNode.replaceChild(div, temp.div); //div替换temp.div
        //                   temp.row.parentNode.removeChild(temp.row);
        //                   delete temp.row;
        //                   Object.delEvent(document, ["onmousemove"], wc.iFunc);
        //                   Object.delEvent(document, ["onmouseup"], wc.eFunc);
        //                   document.onselectstart = wc.iFunc = wc.eFunc = null;
        //               }
        //           }
 
        //        , 50);
 
 
 
 
 
 
    },
 
 
    //---------------------------------------添加对象    
    add: function(o) {  //o代表addRow返回的对象
        //添加对象   
        //alert(o.div);
        var wc = this;
        Object.addEvent(o.div.childNodes[CDrag.IE ? 0 : 1], ["onmousedown"], wc.sMove.bind(wc, o));
    },
 
 
    //---------------------------------------初始化成员 
    parse: function(o)//o代表数组
    {
        //初始化成员   
        var wc = this, //这里所有的this指向的是对象CDrag 
                table = wc.table,
                cols,
                i, j;
        for (i = 0; i < o.length; i++)//根据对象数组循环列数
        {
            cols = table.addCols(o[i].cols); //添加列
            for (j = 0; j < o[i].rows.length; j++)
                wc.add(cols.addRow(o[i].rows[j])); //将行添加到列中，并绑上事件  
        }
    }
};
}

四。JScript3.js

//窗体加载事件
function PageLoad(colNumber, rowNumber) {
 
    var dwidth = 0;
    for (var w = 0; w < colNumber - 1; w++) {//根据列数判断div的宽度
        dwidth = dwidth + 202; //每多一列宽度加202
    }
    $$("div_Content").style.width = dwidth + 'px';
 
 
 
    var Cwidth = 0; //列宽
    for (var i = 1; i < colNumber; i++) {
        var div = CreateObj('div');
        div.id = 'm_' + i; //id
        div.style.padding = "5";
        div.setAttribute('className', 'cell'); //样式
        var CTitle = CreateObj('div');
        CTitle.setAttribute('className', 'line'); //列
        CTitle.innerText = '第' + i + '列';
        div.appendChild(CTitle); //添加头
        for (var j = 1; j < rowNumber; j++) {
            var DContent = CreateObj('div');
            DContent.setAttribute('className', 'move');
            DContent.id = 'm_' + i + '_' + j;
            DContent.style.background = "#fff";
            var title = CreateObj('div');
            title.setAttribute('className', 'title');
            title.innerText = '第' + i + '列的第' + j + '个说';
            title.id = "tit_" + i + "_" + j;
            //title.style.height = "200px";
            //设置宽度随内容变化
            if (j == 1 && (title.innerText.length) < 10) {
                Cwidth = 200;
            }
            else if (j == 1 && (title.innerText.length) > 10) {//根据内容的长度绝对div的宽度
                var wNumber = (title.innerText.length) - 10;
                Cwidth = (200 + (wNumber * 10));
            }
            with (title.style) {//设置div宽度
                width = Cwidth + 'px';
                height = "30px";
                background = '#0080C0';
            }
            DContent.style.width = Cwidth + 'px';
            DContent.style.height = '100px';
            //DContent.innerText = "fdsfds";
            var neirongdiv = CreateObj("div");
            neirongdiv.innerText = "fdsfdsfdsfsd";
            DContent.appendChild(title);
            DContent.appendChild(neirongdiv);
            div.appendChild(DContent); //将行添加到列中
        }
        div.style.width = Cwidth + 'px'; //设置大div的宽度也随着内容改变
        with (CTitle.style) {
            width = 10 + Cwidth + 'px';
        }
        $$("div_Content").appendChild(div);
    }
 
    //拼接数组对象
    var F_Node = $$("div_Content")//获取最外面的层
    var nodes = F_Node.childNodes;
    //循环子节点
    var strs = '[';
    for (var i = 0; i < nodes.length; i++) {
        strs = strs + "{cols:$$('" + nodes[i].id + "')";
        var node2 = nodes[i].childNodes; //获取子节点
        if (node2.length > 0)
            strs += ",rows:[";
        for (var j = 0; j < node2.length; j++) {
            var CurrentNode = node2[j].nextSibling; //兄弟节点的下一个节点
            if (CurrentNode != null)
                strs += "$$('" + CurrentNode.id + "'),"
        }
        strs = strs.substring(0, strs.length - 1) + "]},"; //去，号
    }
    strs = strs.substring(0, strs.length - 1) + "]";
 
    var wc = new CDrag;
    wc.parse(eval(strs));
}
//创建对象
function CreateObj(obj) {
    return document.createElement(obj);
}