CODEWITHSUNDEEP
javascriptjquery
RollCasual Lee
RollCasual Lee

Reputation: 37

Need help in JavaScript/JQuery

need some help.. i want the bin to hide on load and i have a draggable div, so when i drag the div the bin should show and when i leave the div the bin should hide again?

<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>

Upvotes: -1

Views: 61

Answers (4)

Alireza Wassmuss
Alireza Wassmuss

Reputation: 51

you can use this :

            // 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';
            }
        });

Upvotes: 1

kblau
kblau

Reputation: 2107

This will work.

@{
    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>

Upvotes: 0

JYoThI
JYoThI

Reputation: 12085

I think you need ondrag event instead of click event.

   ondrag="function()"
   ondrop="function()"
   ondragover="function()"
   ondragstart="function()"

Upvotes: 0

iNSiDER
iNSiDER

Reputation: 1177

Using jQuery UI, you can catch drag events easily in this way:

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

     },
     drag: function() {

     },
     stop: function() {

     }
  });

Upvotes: 0

Related Questions