Dragging toggled by click_down

Dragging toggled by click_down.markdown

Dragging toggled by click_down

A Pen by bse88 on CodePen.

License.

index.html

<p>Click and hold to start dragging. <br />Release to stop drag.</p>
<div class="variable"></div>
</div>

<div class="click"></div>
</div>

<div class="dragging"></div>
</div>

<div class="moved"></div>
</div>


<div class="element"></div>

script.js

var is_following = false; 
$(document).click(function(e) {
  is_following = !is_following;
   $(".variable").text(is_following);
    mouse_clickX = (e.pageX);
    mouse_clickY = (e.pageY);
$(".click").text("First Click: " + mouse_clickX + " "+  mouse_clickY)
  });


 $(document).mousemove(function(e) {
    mouse_moveX = (e.pageX);
    mouse_moveY = (e.pageY);
   if (is_following) {
    $(".element").css({"top":mouse_moveY, "left": mouse_moveX})
   }
$(".dragging").text("Moving: " + mouse_moveX + " "+  mouse_moveY)
  });

$(document).mousedown(function(e) {
  is_following = !is_following;
   $(".variable").text(is_following);
   });

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body{
  text-align: center;
  font-size: 15px;
  font-family: sans-serif;
  padding: 100px;
}

p{
  font-size: 18px;
  font-weight: bold;
    margin-bottom: 3em;
}

div{
}
.element{
  height: 30px;
  width: 30px;
  border-radius: 20px;
border:3px solid black;
}

.element{
  position: absolute;
  top: 20px;
  left: 20px;
}

body, html{
  position: relative;
  cursor:none!important;
}