如何在拖动另一个鼠标时确定鼠标是否在元素之外 [英] How to determine if mouse is out of an element when dragging another one

问题描述

我有这两个div，我想拖第一个并将其放入第二个！

当它下降时我禁用拖动它再拖动选项并更改一些css属性

of second div（drop zone）。我放置了一个按钮来重新启动第一个div的拖动。

当我开始拖动鼠标时，我想改变掉落区域css属性

离开掉落区域。但我不知道怎么做。

这是我的代码：



html：

< pre lang =xml> < div id = draggable < span class =code-keyword>> < p > 将我拖到< / p > < / div >
< div id = 可投放 > < p < span class =code-keyword>> < text > 将其删除< / text > < / p > < / div >
< 输入 type = 按钮 value = 再次 onclick = setDrag（'＃draggable'） >

css：

＃ draggable  {
  position  ： 绝对;  
  width  ：  200px;  
  height  ：  100px;  
  top  ：  200px;  
  left  ：  500p x;  
 
  border-style  ： 虚线;  
  border-width  ：  2px;  
 
  text-align  ：   center;  
} 
＃ droppable  {
  width  ：  250px;  
  height  ：  150px;  
  top  ：  400px;  
  left  ：  600px;  
 float  ：  left;  
 
  border-radius  ：  5px;  
} 
＃ droppable   p  {
  background-color  ： ＃666;  
 
  margin-top  ：  0;  
 
  height  ：  40px;  
 
  text-align  ：  center;  
} 
＃ droppable   text  {
  vertical-align  ：  middle;  
 
  color  ：  #fff;  
} 
。 free  {
  background-color  ：  #bbb;  
} 
。已删除 {
  background  ：  ＃F2F785;  
  color   ： ＃F2F785;  
} 

jquery：

 $（function（）{
 $（  #droppable）。toggleClass（  free）; 
 $（ ＃draggable）。draggable（
  if （cursor.position.x）{
 $（ this   >  p >  text）.html（）; 
 $（ this ）。toggleClass（  drop）; 
 $（ this ）。toggleClass（  free）; 
 } 
）; 
}）; 
 $（ ＃droppable）。droppable（{
 drop：function （ event ，ui）{
 $（ this ）
 .toggleClass（< span class =code-string>  free）
 .toggleClass（  drop）
 .find（  p）
 .html（  Dropped！）; 
 $（ ＃draggable）。draggable（ 禁用）; 
 flag =  0 ; 
} 
}）; 
}）; 
函数setDrag（id）{
 $（id）.draggable（  enable）; 
} 

解决方案

（function（）{

（ #droppable）。toggleClass（ free）;

（ #draggable）。draggable（
if （cursor.position.x）{

i have this 2 divs which i want drag the first and drop it into the second!
when it drops i disable dragging it for anymore drag option and change some css properties
of second div(drop Zone). i placed a button to reenable dragging of first div.
i want to change drop Zone css properties when i start dragging and mouse is
getting out of drop Zone. but i don't know how to do it.
here's my code:

html:

<div id="draggable"><p>Drag me around</p></div>
<div id="droppable"><p><text>Drop it here</text></p></div>
<input type="button" value="Again" onclick="setDrag('#draggable')">

css:

#draggable{
    position: absolute;
    width: 200px;
    height: 100px;
    top: 200px;
    left: 500px;

    border-style: dashed;
    border-width: 2px;

    text-align: center;
}
#droppable{
    width: 250px;
    height: 150px;
    top: 400px;
    left: 600px;
    float: left;

    border-radius: 5px;
}
#droppable p{
    background-color: #666;

    margin-top: 0;

    height: 40px;

    text-align: center;
}
#droppable text{
    vertical-align: middle;

    color: #fff;
}
.free{
    background-color: #bbb;
}
.dropped{
    background: #F2F785;
    color: #F2F785;
}

jquery:

$(function(){
    $("#droppable").toggleClass("free");
    $("#draggable").draggable(
        if(cursor.position.x){
            $(this > p > text).html();
            $(this).toggleClass("dropped");
            $(this).toggleClass("free");
        }
    );
});
$( "#droppable" ).droppable({
    drop: function( event, ui ) {
        $( this )
            .toggleClass("free")
            .toggleClass("dropped")
            .find( "p" )
            .html( "Dropped!" );
            $("#draggable").draggable("disable");
            flag = 0;
         }
    });
});
function setDrag(id){
     $(id).draggable("enable");
}

解决方案

(function(){

("#droppable").toggleClass("free");

("#draggable").draggable( if(cursor.position.x){

这篇关于如何在拖动另一个鼠标时确定鼠标是否在元素之外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！