需要JavaScript/JQuery方面的帮助吗_Javascript_Jquery

需要JavaScript/JQuery方面的帮助吗

javascript jquery

需要JavaScript/JQuery方面的帮助吗,javascript,jquery,Javascript,Jquery,我需要一些帮助。。我希望箱子在装载时隐藏，并且我有一个可拖动的div，所以当我拖动div时，箱子应该显示，当我离开div时，箱子应该再次隐藏 <html> <head> <style> .box{ border: 1px solid black; } </style> <script> window.onload = function() { document.getElementById('myDIV

我需要一些帮助。。我希望箱子在装载时隐藏，并且我有一个可拖动的div，所以当我拖动div时，箱子应该显示，当我离开div时，箱子应该再次隐藏

<html>
<head>
  <style>
  .box{
    border: 1px solid black;
  }
  </style>

  <script>
  window.onload = function() { document.getElementById('myDIV').style.display = 'none'; };
  function showImg(){
    var x = document.getElementById('myDIV');
    if (x.style.display === 'none') { x.style.display = 'block'; }
    else { x.style.display = 'none'; }
  }
  </script>

</head>

<body>
  <div id="show" onclick="showImg()" class="box">
    when this div is select and drag the bin should be shown
  </div>

  <div id="myDIV">
    <img src="img/upload.png"/>
  </div>

</body>
</html>

使用jQuery UI，您可以通过以下方式轻松捕获拖动事件：

  $("#myDIV").draggable({
     start: function() {

     },
     drag: function() {

     },
     stop: function() {

     }
  });

我想你需要的是ondrag事件而不是点击事件

这会奏效的

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <style>
        .box {
            border: 1px solid black;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        window.onload = function () { document.getElementById('myDIV').style.display = 'none'; };
        function showImg() {
            var x = document.getElementById('myDIV');
            if (x.style.display === 'none') {
                x.style.display = 'block';
            }
            else { x.style.display = 'none'; }
        }

        $(function () {
            $("#show").draggable();
        });
    </script>

</head>

<body>
    <div id="show" onclick="showImg()" class="box">
        when this div is select and drag the bin should be shown
    </div>

    <div id="myDIV">
        <img src="~/Images/untitled.gif" />
        @*<img src="img/upload.png" />*@
    </div>

</body>
</html>

您可以使用以下选项：

            // for show element when start drag    
            document.addEventListener("dragstart", function (event) {
                if (event.target.className == "box") {
                    var x = document.getElementById('myDIV');
                    x.style.display = 'block';
                }
            });
       // for hide element when drag end
        document.addEventListener("dragend", function (event) {
            if (event.target.className == "box") {
                var x = document.getElementById('myDIV');
                x.style.display = 'none';
            }
        });

你面临的问题是什么？这是一个可爱的不清楚…什么是“要隐藏的箱子”？箱子就是图像？我认为你需要使用ondrag事件

            // for show element when start drag    
            document.addEventListener("dragstart", function (event) {
                if (event.target.className == "box") {
                    var x = document.getElementById('myDIV');
                    x.style.display = 'block';
                }
            });
       // for hide element when drag end
        document.addEventListener("dragend", function (event) {
            if (event.target.className == "box") {
                var x = document.getElementById('myDIV');
                x.style.display = 'none';
            }
        });