如何将图像拖入div？

Question

您好，我对拖放有疑问。
如何像页面构建器一样将图像拖放到 div 中？我不知道。enter image description here

Answer 1

这里是将图像拖到 div 文件中的代码。你需要给你的图像一个 class 命名为 draggable 并且你的 div 一个 class 命名为 droppable 并通过这些 class 名称从 jquery 调用它。

     <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="a.css">
    <title>Hello, world!</title>
  </head>
  <body>
    <div class="hp-product-item">
       <img class="draggable" style="height:500px;width:500px;" src="https://images.unsplash.com/photo-1516703914899-e8303d01329a?ixlib=rb-0.3.5&s=9ebf86cdab3a1c7319ff15b16d09b1f7&auto=format&fit=crop&w=1350&q=80">
       <div class="droppable" style="direction:rtl;height:500px;width:500px;border:5px solid black;">drop the image here</div>



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script>
    $('.draggable').draggable({
    cursor: 'move',
    revert: 'invalid',
    helper: 'original',

    start: function (event, ui)
    {


        $(this).parent().find('#adminTimeReservation').css('display','block');

    },
    drag: function (event, ui)
    {
    }

    });//draggable
    $('.droppable').droppable({
        drop: function(ev, ui) {
            $(this).prepend(ui.draggable);
              ui.draggable.position({
                my: 'right top',
                at: 'right top',
                of: this
              });


        }    
    });//droppable
    </script>
  </body>
</html>

我使用的元素的文档在这个 link https://jqueryui.com/draggable/

如何将图像拖入div？

How to drag image inside div?

draggable