Cách sử dụng JavaScrip DHTML Drag'nDrop:
1. Tải thư viện DHTML JavaScrip Drag'nDrop tại đây:
Sau khi tải về bạn giải nén được một tập tin tên là wz_dragdrop.js hãy đặt nó vào một thư mục nào đó trên trang web của bạn.
Chẳng hạn như nếu sử dụng trang web Joomla! thì bạn có thể đặt nó trong thư mục chưa các tập tin JavaScript của template:
Mã: Chọn tất cả
templates/tên_template_của_bạn/js2. Khai báo liên kết đến Script này trong trang web của bạn như sau:
- Mở tập tin index.php trong thư mục templates/tên_template/ và dán dòng mã dưới đây vào ngay sau thẻ <body>
Mã: Chọn tất cả
<script type="text/javascript" src="templates/tên_template/js/wz_dragdrop.js"></script>Đặt tên cho hình ảnh muốn Drag'nDrop theo cú pháp sau:
Mã: Chọn tất cả
<img name="name1" src="/images/image_abc.jpg" width="240" height="135">- name là tên duy nhất, không được trùng lắp.
- Thông số width và height là bắt buộc và phải có giá trị chính xác, không dùng giá trị %
4. Chèn mã dưới đây vào ngay phía trên thẻ </body> trong trang có hình ảnh muốn tạo Drag'nDrop cho Image:
Mã: Chọn tất cả
<script type="text/javascript">
<!--
SET_DHTML("name1");
//-->
</script>Mã: Chọn tất cả
<script type="text/javascript">
<!--
SET_DHTML("name1", "name2", "name3");
//-->
</script>Khi muốn di chuyển ảnh thì bạn chỉ cần nhấp và giữ nút trái chuột vào ảnh rồi di chuyển nó đi tùy ý.
Ngoài ra bạn cón có thể tạo thêm các hiệu ứng khác với Script này.
Xem thêm hướng dẫn cách sử dụng DHTML JavaScrip Drag'nDrop tại đây: http://www.walterzorn.de/en/dragdrop/dragdrop_e.htm
