Javascript drop事件在jquery中不起作用_Javascript_Jquery

Javascript drop事件在jquery中不起作用

javascript jquery

Javascript drop事件在jquery中不起作用,javascript,jquery,Javascript,Jquery,我有一个div-tav标签，里面有一些id。因此，当我试图在里面放东西时，它应该会发出警报 <html> <head>  <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-u

我有一个div-tav标签，里面有一些id。因此，当我试图在里面放东西时，它应该会发出警报

<html>
  <head>



<!-- Load jQuery from Google's CDN -->

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Source our javascript file with the jQUERY code -->

    <style type="text/css" media="screen">

    </style>
  </head>
  <body>
<div class="fileupload"  id="drop-area">
 <img src="upload-here.png" alt="Smiley face" height="200" width="200" onclick='$("#fileupload").click()' id="clickImage">
    <input type="file" class="file" name="fileupload"  id='fileupload' style="display:none;" accept="image/*"/>


 </div>


   </div>
  </body>
  <script src="script.js"></script>
<script>
$(document).ready(function() {


  $( "#drop-area" ).droppable({
    drop: function( event, ui ) {
   e.preventDefault();
  var image = e.originalEvent.dataTransfer.files;
  createFormData(image);
  }
});





  function createFormData(image) {
  var formImage = new FormData();
  formImage.append('userImage', image[0]);
  uploadFormData(formImage);
}

function uploadFormData(formData) {
  $.ajax({
  url: "upload.php",
  type: "POST",
  data: formData,
  contentType:false,
  cache: false,
  processData: false,
  success: function(data){
    $('#drop-area').append(data);
  }
});
}
  });




</script>
</html>


$（文档）.ready（函数（）{
$（“#放置区域”）。可放置({
drop：函数（事件、用户界面）{
e、 预防默认值（）；
var image=e.originalEvent.dataTransfer.files；
createFormData（图像）；
}
});
函数createFormData（图像）{
var formImage=new FormData（）；
formImage.append（'userImage'，image[0]）；
上传FormData（formImage）；
}
函数uploadFormData（formData）{
$.ajax({
url:“upload.php”，
类型：“POST”，
数据：formData，
contentType:false，
cache:false，
processData:false，
成功：功能（数据）{
$（“#放置区域”）。追加（数据）；
}
});
}
});

这是我写的代码，但问题是它没有发出警报，而是在浏览器中显示文件……请帮助我。提前感谢您首先添加jquery ui库

首先添加jqueryui库

使用此链接以正确使用droppable，您需要包括jQueryUI js，并且一次不使用两个版本的jquery

您收到任何错误吗？请检查您的浏览器控制台。您需要添加jquery ui库，并且不要保留两个版本的

jquery

@KaushikMaheta我已经更新了我的代码，但仍然存在错误gone@DibyenduKonar，添加jquery UI库。您可以在这里找到示例。你有什么错误吗？请检查您的浏览器控制台。您需要添加jquery ui库，并且不要保留两个版本的

jquery

@KaushikMaheta我已经更新了我的代码，但仍然存在错误gone@DibyenduKonar，添加jquery UI库。您可以在这里找到示例。

  $( "#drop-area" ).droppable({
    drop: function( event, ui ) {
    //code here
  }
});