Need help in JavaScript/JQuery

Question

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>

What is the problem u r facing?

Santosh
– Santosh

2017-06-06 02:40:17 +00:00
Commented Jun 6, 2017 at 2:40 — Santosh
– Santosh, Commented Jun 6, 2017 at 2:40
That is a cute unclear...

Louys Patrice Bessette
– Louys Patrice Bessette

2017-06-06 02:41:06 +00:00
Commented Jun 6, 2017 at 2:41 — Louys Patrice Bessette
– Louys Patrice Bessette, Commented Jun 6, 2017 at 2:41
What is «the bin to hide» ?

Louys Patrice Bessette
– Louys Patrice Bessette

2017-06-06 02:42:01 +00:00
Commented Jun 6, 2017 at 2:42 — Louys Patrice Bessette
– Louys Patrice Bessette, Commented Jun 6, 2017 at 2:42
the bin is the image?

Jiro90
– Jiro90

2017-06-06 02:44:28 +00:00
Commented Jun 6, 2017 at 2:44 — Jiro90
– Jiro90, Commented Jun 6, 2017 at 2:44
i think you need to use ondrag event

JYoThI
– JYoThI

2017-06-06 02:46:33 +00:00
Commented Jun 6, 2017 at 2:46 — JYoThI
– JYoThI, Commented Jun 6, 2017 at 2:46

Alireza Wassmuss · Accepted Answer · 2017-06-06 03:42:05Z

1

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

answered Jun 6, 2017 at 3:42

Alireza Wassmuss

514 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

iNSiDER · Accepted Answer · 2017-06-06 02:45:07Z

0

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

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

     },
     drag: function() {

     },
     stop: function() {

     }
  });

answered Jun 6, 2017 at 2:45

iNSiDER

1,3271 gold badge8 silver badges4 bronze badges

Comments

JYoThI · Accepted Answer · 2017-06-06 02:51:00Z

0

I think you need ondrag event instead of click event.

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

answered Jun 6, 2017 at 2:51

JYoThI

12.1k1 gold badge13 silver badges26 bronze badges

Comments

kblau · Accepted Answer · 2017-06-06 02:51:20Z

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>

Collectives™ on Stack Overflow

Need help in JavaScript/JQuery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related