2010-11-02 121 views
3

所以我想光標從更改光標按住?

#sideBar ul li .template{ 
cursor:pointer; 
} 

到也許光標改變:移動;當用戶正在拖動...有什麼我可以用jQuery或HTML來做到這一點,你可以按住鼠標按鈕

回答

11

而是在你的JavaScript代碼改變的CSS,保持它只是改變一個類,只要你想,這將與許多不同的東西更新的元素。我添加了一個:hover僞類,因爲我不確定cursor沒有它。

此外,在未來添加的任何元素的生活作品和綁定不會。

的CSS:

#sideBar ul li .template{ 
cursor:pointer; 
} 

#sideBar ul li .template.mouseDown:hover{ 
cursor:auto; /* or whatever cursor */ 
} 

的Javascript:

$("#sideBar ul li .template").live("mousedown", function() { 
    $(this).addClass("mouseDown"); 
}).live("mouseup", function() { 
    $(this).removeClass("mouseDown"); 
}); 
+4

只是添加到那些發現這一點。 .live()方法現在從jQuery 1.7開始取消了。你可以在它的位置使用[.on()](http://api.jquery.com/on/)方法。 – tokyovariable 2012-04-26 22:58:49

2

你可以嘗試使用jQuery將css更改綁定到mousedown事件。然後使用mouseup()在用戶完成拖動時將光標更改回來。

例如爲:

$(document).ready(function() { 
    $('#sideBar ul li .template').mousedown(function() { 
     $(this).css('cursor', 'move'); 
    }); 
    $('#sideBar ul li .template').mouseup(function() { 
     $(this).css('cursor', 'pointer'); 
    }); 
}); 
1

嘗試是這樣的:

someFunc({ 
    onstart: function(){ 
    $(document.body).css('cursor', 'move'); 
    }, 

    onstop: function(){ 
    $(document.body).css('cursor', 'auto'); 
    } 
}); 

在哪裏,當它結束時,拖動開始和onstoponstart必須被觸發。


如果您要創建一個自定義的拖功能,你可以使用mousedownmouseup事件:

$(el) 
    .mousedown(function(){ 
    $(this).css('cursor', 'move'); 
    }) 
    .mouseup(function(){ 
    $(this).css('cursor', 'auto'); 
    }); 
1

當然,你絕對可以做到這一點。 jquery .mouseDown函數可以設置爲處理程序,那麼你只需要改變css。這裏有一個example

$('.someElement').mousedown(function() 
{ 
    $(this).css('cursor', 'move'); 
}); 
$('.someElement').mouseup(function() 
{ 
    $(this).css('cursor', 'pointer'); 
}); 
2

我不會基本上重複別人已經公佈了相同的代碼,而是一個適當的阻力不應該觸發一個簡單的鼠標按下事件。

在mousedown上,您應該標記一個可能的拖動並將鼠標座標保存在mousedown發生的位置,然後附加一個mousemove處理程序。 (這樣,當你在拖動過程中只對它們真正感興趣時,你不會經常跟蹤鼠標移動)

只有當保存的mousedown座標和當前的鼠標座標大於某個增量。這可以防止每一次短暫/意外的點擊都像拖拽一樣。

最後,放下(mouseup),然後根據需要處理放置事件,並清除可能的拖動標記和保存的mousedown座標。

觀看操作系統桌面在圖標上單擊並按住不動,然後開始移動 - 您會看到該輪廓是如何表現的。