Reference to the Draggable instance that enters a drop target.
The current DropTarget element in the area that initiated the event.
The current Draggable element.
Edit in Kendo UI Dojo Edit
< div id = " area" >
< div id = " leftArea" > </ div>
< div id = " rightArea" > </ div>
</ div>
< div class = " purple" > </ div>
< div class = " purple" > </ div>
< script>
$ ( ".purple" ) . kendoDraggable ( {
hint : function ( element ) {
return element. clone ( ) ;
}
} ) ;
$ ( "#area" ) . kendoDropTargetArea ( {
filter : "#leftArea, #rightArea" ,
dragenter : function ( e ) {
e. draggable . hint . css ( "opacity" , 0.3 ) ;
} ,
dragleave : function ( e ) {
e. draggable . hint . css ( "opacity" , 1 ) ;
}
} ) ;
</ script>
< style>
.purple {
width : 50 px ;
height : 50 px ;
border : 2 px solid green ;
margin : 5 px ;
display : inline-block;
}
.purple { background-color : purple ; }
#area {
width : 300 px ;
height : 300 px ;
line-height : 300 px ;
background-color : gray ;
}
#leftArea , #rightArea {
width : 140 px ;
height : 100 px ;
border : 2 px solid green ;
margin : 2 px ;
background-color : orange ;
display : inline-block;
vertical-align : middle;
}
</ style>