切換光標顯示，我可以放下一個元素

我有一個問題/任務，這是太明顯了，我仍然不知道爲什麼我無法找到一個解決方案...切換光標顯示，我可以放下一個元素

在JavaScript應用程序，使用jQuery UI我正在使用draggable()和droppable() API來移動元素。這工作直接和預期一樣。
但是現在我想改變鼠標光標，使其顯示我可以放置元素的位置（cursor: "copy"）或不可能的位置（cursor: "no-drop"）。

這應該 - 當然 - 只在拖動過程中發生，否則應該顯示正常光標。

注：可以假設降在一個特殊<div>只允許（例如標識由id或class）和其他地方的下降是不允許的。

來源

2014-11-21 Chris

小玩幾把在[小提琴]（HTTP：//的jsfiddle。 net/mdesdev/3bbpsj23 /）;） – mdesdev 2014-11-21 23:31:53

您可以設置光標風格可拖動到no-drop，同時使用css()方法拖動使用start事件回調，並更改它到copy，當它在over事件回調中超過可投放範圍時。

一旦拖動離開投擲的，你可以恢復光標回no-drop的out事件回調中，並設置stop事件回調中通過設置CSS cursor屬性值拖動停止時initial重置回默認光標下面的拖動，如下所示：

$(function() { 
 
    $("#draggable").draggable({ 
 
    start: function(event,ui){ 
 
    $(this).css("cursor", "no-drop"); 
 
    }, 
 
    stop: function(event,ui){ 
 
    $(this).css("cursor", "initial"); 
 
    } 
 
    }); 
 
    $("#droppable").droppable({ 
 
    over: function(event, ui) { 
 
     ui.draggable.css("cursor", "copy"); 
 
    }, 
 
    out: function(event, ui) { 
 
     ui.draggable.css("cursor", "no-drop"); 
 
    } 
 
    }); 
 
});

div { 
 
    display: inline-block; 
 
    margin: 20px; 
 
    text-align: center; 
 
} 
 
#draggable { 
 
    width: 50px; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    background: dodgerblue; 
 
} 
 
#droppable { 
 
    width: 100px; 
 
    height: 100px; 
 
    line-height: 100px; 
 
    background: hotpink; 
 
}

<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
 
<div id="draggable"> 
 
    <span>Drag</span> 
 
</div> 
 

 
<div id="droppable"> 
 
    <span>Drop here</span> 
 
</div>

來源

2014-11-22 08:01:45

給dropzone一個類（dropzone），當你開始拖動時，通過Javascript向正文元素（draggingInEffect）添加一個類。

一旦你停止拖動，再次從身體中刪除該類。

然後添加一個CSS規則body.draggingInEffect .dropzone { cursor: url(whatever); }

來源

2014-11-21 23:03:10 dave

改變光標拖動

$(".selector").draggable({ cursor: "crosshair" });

使用懸停類當它在放置目標

$(".selector").droppable({ hoverClass: "drop-hover" });

來源

2014-11-21 23:04:51 Billy

但是這將如何工作？ 'hoverClass'被添加到隱藏在其中的任何'遊標'樣式的可拖拽下方的可拖拽。你有一個小提琴在工作嗎？ – Chris 2014-11-22 12:15:50

好的，非常感謝你！你所有的答案是非常有益的啓發我說的工作對我一個解決方案：http://jsfiddle.net/qck9kf17/

的「貓膩」基本上是：

$('.box').draggable({ cursor: "no-drop" }); 

$('.container').droppable({ 
    over: function(){ 
     $('body').css('cursor','copy'); 
    }, 
    out: function(){ 
     $('body').css('cursor','no-drop'); 
    } 
});

來源

2014-11-22 12:26:08 Chris

切換光標顯示，我可以放下一個元素

回答

相關問題