将JQuery对话框更改为我自己的div

Question

我试图让整个页面成为图像的拖放区域，任何人都知道如何将此对话框更改为我自己的图像。我试图让它像一个表格。

https://jsfiddle.net/rh021Lo6/

＆＃13;

＆＃13;

 Function.prototype.bindToEventHandler = function bindToEventHandler() {
     var handler = this;
     var boundParameters = Array.prototype.slice.call(arguments);
     //create closure
     return function(e) {
       e = e || window.event; // get window.event if e argument missing (in IE)
       boundParameters.unshift(e);
       handler.apply(this, boundParameters);
     }
   };

   var dragDropMedia = {
     init: function($element) {
       var element = $element[0];

       element.addEventListener("dragover", function(e) {
         e.preventDefault(); //Prevents page redirection on drop event?
       });
       element.addEventListener('drop', this.handleDrop);
       element.addEventListener('dragenter', this.handleDragEnter);
     },

     handleDrop: function(e) {
       e.preventDefault();
       e.stopPropagation();
       $(function() {
         $("#dialog").dialog({
           resizable: false,
            draggable: false,
           dialogClass: "no-close, titlegone",

         });

       })

       var file = e.dataTransfer.files[0],
         reader = new FileReader();

       reader.addEventListener('loadend', function(e, file) {
         var bin = this.result;

         $.post('uploadImage.php', {
             imageBase64: bin
           },
           function(data, status) {
             alert('Data: ' + data + '\nStatus: ' + status);
           });
       }.bindToEventHandler(file));

       reader.readAsDataURL(file);
     },

     handleDragEnter: function(e) {
       e.preventDefault();
     }
   }
   $(document).ready(function() {
     dragDropMedia.init($('.drop'));
   });

＆＃13;

  body{
    font: 62.5% "Trebuchet MS", sans-serif;
    margin: 50px;
  }
  .demoHeaders {
    margin-top: 2em;
  }
  #dialog-link {
    padding: .4em 1em .4em 20px;
    text-decoration: none;
    position: relative;
  }
  #dialog-link span.ui-icon {
    margin: 0 5px 0 0;
    position: absolute;
    left: .2em;
    top: 50%;
    margin-top: -8px;
  }
  #icons {
    margin: 0;
    padding: 0;
  }
  #icons li {
    margin: 2px;
    position: relative;
    padding: 4px 0;
    cursor: pointer;
    float: left;
    list-style: none;
  }
  #icons span.ui-icon {
    float: left;
    margin: 0 4px;
  }
  .fakewindowcontain .ui-widget-overlay {
    position: absolute;
  }
  select {
    width: 200px;
  }
  .drop{
  width:500px;
  height:500px;
  background-color:grey;
}
.ui-dialog-titlebar-close {
  visibility: hidden;
}

＆＃13;

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 <link rel="stylesheet" href="/resources/demos/style.css">
 	<link href="jquery-ui.css" rel="stylesheet">

<div class="drop"></div>
<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

＆＃13;

＆＃13;

＆＃13;