Dong Nguyen: Di chuyển đối tượng trên trang web

Một trang web được xây dựng như ví dụ trên cho phép chúng ta kéo thả các đối tượng trên nhiều nền trình duyệt khác nhau. Tôi đã test trên IE 6+, Opera 8+, Netscape 7+, FF, Flock. Không có vấn đề gì cả.

Tuy nhiên, xem cách mà chúng ta di chuyển đối tượng như vậy không giống với một ứng dụng desktop lắm. Trong Window, khi một cửa sổ được di chuyển khỏi vị trí, chúng ta chỉ thấy một khung chuyển động theo trỏ chuột, cửa sổ chỉ chính thức được đặt vào vị trí mới khi mà thao tác drop xảy ra.

Với một chút nỗ lực, bạn cũng có thể làm cho ứng dụng web của chúng ta cư xử theo đúng cung cách này.

Có nhiều hơn một phương pháp. Ở đây tôi chọn phương pháp dễ hiểu nhất : khi nhấp vào đối tượng để kéo nó đi, tôi tạo ra một đối tượng mới có dạng khung bao quanh đối tượng chính.

Như một cái bóng, sẽ chỉ cần di chuyển cái bóng này. Với sự kiện mouseup, tôi làm ẩn khung ấy đi và thay đối tượng chính vào vị trí mà nó cần phải được đặt xuống.

Chúng ta sẽ viết thêm một hàm Shadow :

function Shadow(sLeft,sTop,sWidth,sHeight){
    elm=document.createElement('div');
    document.body.appendChild(elm);
    elm.className="moving";
    elm.style.left = sLeft + 'px';
    elm.style.top  = sTop + 'px';
    elm.style.width = sWidth + 'px';
    elm.style.height  = sHeight + 'px';
    this.onmousedown=makeObjectToDrag(this.name);
}

Hàm này định nghĩa một lớp đối tượng với các tham số chỉ định kích thước và vị trí tương đối xác lập sẵn mỗi khi khởi tạo. Các hiện thể của lớp này sẽ tồn tại trên trang web dưới dạng các thẻ DIV.

elm=document.createElement('div');
document.body.appendChild(elm);

Một sự kiện onmousedown xảy ra trên bất kỳ hiện thể nào của Shadow cũng chỉ định nó trở thành một đối tượng có thể kéo thả :

this.onmousedown=makeObjectToDrag(this.name);

Ban đầu tôi viết là makeObjectToDrag(this.id), nhưng trên IE xuất hiện thông báo lỗi mặc cho việc rê thả diễn ra bình thường. Thay bằng makeObjectToDrag(this.name) thì không nó không phàn nàn gì nữa !

startMove, moving và drop cũng được sửa lại một chút.

function startMove(e){
getCursorPos(e);
  i1=cursor.x- dragobj.offsetLeft;
  h1=cursor.y- dragobj.offsetTop ;
shadow=new Shadow(dragobj.offsetLeft,dragobj.offsetTop,250,150)    ;
}

function moving(e){
  getCursorPos(e);
    if(dragobj&amp;&amp;elm){
        oLeft=cursor.x-i1;
        oTop=cursor.y-h1;
          elm.style.left = oLeft + 'px';
          elm.style.top  = oTop + 'px';
    }
}

function drop(){
  if(dragobj){
    elm.className='hide';
    elm=null;

    dragobj.style.left = oLeft + 'px';
    dragobj.style.top  = oTop + 'px';
      dragobj = null;
  }
}

Như vậy, ở vào thời điểm bắt đầu thao tác drag, chúng ta khởi tạo 1 thể hiện của đối tượng Shadow :

shadow=new Shadow(dragobj.offsetLeft, dragobj.offsetTop, 250, 150) ;

Trong moving, hàm kiểm soát quá trình drag, chúng ta không hề đả động tới dragobj mà chỉ cập nhật vị trí cho elm.

Với drop, chúng ta làm cho Shadow ẩn đi bằng cách thay đổi lớp CSS của nó. Và giải phóng biến elm. Cuối cùng, chúng ta đặt dragobj vào đúng vị trí cần thiết.

Bây giờ, sự di chuyển đối tượng trên trang đã có vẻ pro hơn rồi !

Di chuyển đối tượng trên trang web - Phần 2