js melaksanakan kemahiran seret dan lepas (pembina)

js melaksanakan kemahiran seret dan lepas (pembina)_javascript

WBOY

Lepaskan： 2016-05-16 15:25:56

asal

1419 orang telah melayarinya

1. Kelebihan menggunakan corak pembina untuk pembangunan

1. Logik perniagaan lebih jelas

2. Elakkan penjanaan sejumlah besar pembolehubah global Terdapat hanya satu pembolehubah global, yang bersamaan dengan satu-satunya antara muka yang didedahkan oleh modul berfungsi ini

3. Jika digabungkan dengan pembangunan modular, adalah sangat mudah untuk menambah modul tersuai pada modul bersatu Selagi nama modul tersuai tidak bercanggah, ia tidak akan mengganggu satu sama lain apabila digunakan

4. Kod ini boleh diselenggara dan bermanfaat kepada orang lain;

2. Mari gunakan mod ini dan gunakan seret dan lepas sebagai contoh untuk menerangkan.

1. html, seperti berikut:

<body>
　　<div class="box" id="box1"><div class="main"><div class="bar">拖拽区</div><div class="content">内容区块</div></div></div>
　　<div class="box" id="box2"><div class="main"><div class="bar">拖拽区</div><div class="content">内容区块</div></div></div>
　　<div class="box" id="box3"><div class="main"><div class="bar">拖拽区</div><div class="content">内容区块</div></div></div>
</body>

Salin selepas log masuk

2. css

<style type="text/css">
  .box{position:absolute;left:100px;top:100px;padding: 5px;box-shadow:2px 2px 4px #666666; font-size:12px;}
  #box2{left:500px;}
  #box3{left:900px; }
  .main{border:1px solid #a0b3d6;background-color: #fff; }
  .bar{line-height:24px;padding-left:5px;border-bottom:1px solid #a0b3d6;background-color:#beceeb;cursor:move;}
  .content{padding: 10px 5px;height:200px;width:250px;}
</style>

Salin selepas log masuk

Proses khusus dijelaskan melalui ulasan js. Saya harap ia dapat membantu semua orang menggunakan pembina dengan lebih baik untuk mencapai kesan seret dan lepas.