Kéo và thả hình ảnh và các thành phần khác

Chúng ta đã biết cách kéo tiện ích qua bài viết này. Áp dụng rộng hơn với sự hỗ trợ của thư viện Scriptaculous, chúng ta có thể tạo thủ thuật kéo và di chuyển hình ảnh và các thành phần khác. Thủ thuật này áp dụng cho cả website thông thường và blogspot.

Bước đầu tiên là đặt đoạn code sau đây vào trước thẻ </head>. (Nếu trong Template của bạn đã có đoạn code này rồi thì không cần thêm vào)

<!-- Prototype and Scriptaculous-->
<script type='text/javascript' src='http://www.google.com/jsapi'/>
<script type='text/javascript' >
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>

Bước tiếp theo, bạn cần đặt id cho hình ảnh, ví dụ image1, image2, image3, … và sử dụng cấu trúc như sau cho hình ảnh.

<img id="image1" style="cursor:move; border:0px;" src="URL_hình ảnh 1"/><script type="text/javascript">new Draggable('image1');</script>

Nếu bạn áp dụng cho nhiều hình ảnh trong đó có đoạn text chú thích cho hình ảnh thì sử dụng cấu trúc như sau.

<div style="margin: 0px auto; text-align: center;"><img id="image2" style="border: 0px none ; margin: 0px auto; cursor: move;" src="URL_hình ảnh 2" /> <img id="image3" style="border: 0px none ; margin: 0px auto; cursor: move;" src="URL_hình ảnh 3" />
Đoạn text chú thích</div>
<script type="text/javascript">new Draggable('image2');new Draggable('image3');</script>

Nếu bạn muốn áp dụng cho một đoạn text thông báo thì bạn cần đặt tên id cho nó là div1 và sử dụng cấu trúc sau.

<div id="div1" style="border: 2px solid rgb(0, 0, 0); margin: 0px 0px 10px; padding: 4px; background: rgb(220, 220, 220) none repeat scroll 0% 0%; float: right; cursor: move; width: 250px; height: 60px; color: rgb(0, 0, 255); text-align: justify;">Đây là nội dung đoạn text thông báo.</div><script type="text/javascript">new Draggable('div1');</script>

Ngoài ra, bạn còn có thể áp dụng cho liên kết bằng hình ảnh và sử dụng cấu trúc sau đây.

<img id="image0" style="cursor:move; border:0px;" ondblClick="javascript:window.open('URL_liên kết cho hình ảnh')" src="URL_hình ảnh"/>
<script type="text/javascript">new Draggable('image0');</script>

Chú ý, các id cho hình ảnh cần được đặt kèm theo số thứ tự để tránh sự trùng lắp dẫn đến thủ thuật kéo không hoạt động được.