Drop not work! Help :(

79 views
Skip to first unread message

morris...@gmail.com

unread,
Jan 15, 2017, 9:00:10 AM1/15/17
to threedubmedia
Hi all,

i have this problem: when i drag a specific element into other element, the "drop" events not work. This is a simple example:


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<link href="http://threedubmedia.com/inc/img/favicon.ico" rel="shortcut icon" />
<link href="http://threedubmedia.com/inc/css/base.css" rel="stylesheet" />
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-98841-11']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
<title>ThreeDubMedia &middot; jquery.event.drop</title>
</head>
<body>
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-98841-11']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
<div class="item">PROVA</div>

<div class="container">CONTAINER</div>
</body>
</html>
<script>
jQuery(function($){
$('.item').drag("start",function( ev, dd ) {
console.log("Start Drag");
})
.drag("end",function( ev, dd ){
console.log("End drag");
})
.drag(function( ev, dd ){
console.log("drag");
})

});
$('.container')
.drop("start",function(){
console.log("Drop Start");
})
.drop(function( ev, dd ){
console.log("Drop");
})
.drop("end",function(){
console.log("Drop End");
})

</script>
<style>
.container {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: blue;
top: 200px;
}
</style>


My project is more complex and not work but this simple example has the same result. Not print the messages into drop events.

Thanks all


Reply all
Reply to author
Forward
0 new messages