cari

Rumah >hujung hadapan web >tutorial js >js melaksanakan kemahiran seret dan lepas (pembina)_javascript

js melaksanakan kemahiran seret dan lepas (pembina)_javascript

WBOY
WBOYasal
2016-05-16 15:25:561488semak imbas

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>
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>
3

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JS menyedari contoh lengkap mengklik kotak input untuk memunculkan kotak pilihan kemahiran effect_javascriptArtikel seterusnya：JS menyedari contoh lengkap mengklik kotak input untuk memunculkan kotak pilihan kemahiran effect_javascript

Artikel berkaitan

Lihat lagi