jQuery UI를 사용하여 마우스가 특정 요소 위에있을 때만 끌기 허용

Question

<div> 안에 마우스가있는 경우에만 <div>을 드래그 할 수있게하려고합니다. 마우스가 첫 번째 요소를 넘지 않으면 <div> 전체를 드래그 할 수 없습니다.

Uncaught TypeError: undefined is not a function(index):27 (anonymous function)jquery-1.11.0.js:4995 jQuery.event.special.(anonymous function).handlejquery-1.11.0.js:4624 jQuery.event.dispatchjquery-1.11.0.js:4292 elemData.handle 

Answer 1

당신은 드래그 위젯의 handle 옵션을 찾고 :

$("#containers").draggable({ 
 
    handle: "#cont1" 
 
});

#containers { 
 
    height: 100px; 
 
    background: grey; 
 
} 
 
#cont1 { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: dodgerblue; 
 
} 
 
#cont2 { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: #eee; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
<div id="containers"> 
 
    <div id="cont1">foo</div> 
 
    <div id="cont2">bar</div> 
 
</div>

마우스 입력하거나 #cont1을 떠날 때

<div id="containers"> 
    <div id="cont1">foo</div> 
    <div id="cont2">bar</div> 
</div> 

<script> 
    $(document).ready(function() { 
    $("#cont1").mouseenter(function() { 
     $("#containers").draggable("enable"); 
    }); 
    $("#cont1").mouseleave(function() { 
     $("#containers").draggable("disable"); 
    }); 
    }); 
</script> 

는 콘솔에 오류가 : 이것은 내 코드입니다

Answer 2

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> 
<div id="containers" style="height: 200px;width: 200px;background-color: blanchedalmond"> 
    <div id="cont1">foo</div> 
    <div id="cont2">bar</div> 
</div> 
<script> 
$(document).ready(function() { 
    $("#cont1").mouseenter(function() { 
     $("#containers").draggable({ disabled: false }); 
    }); 
    $("#cont1").mouseleave(function() { 
     $("#containers").draggable({ disabled: true }); 
    }); 
}); 
</script> 

이 코드를 사용하십시오.