Don't Forget The JSFiddle!!!

Question

我是Stack Overflow和javascript的新手。我被要求创建一个应用程序，以便人们可以享受学习科学。据我所知，我提出了一些问题并且让它们变得拖延了。尽管如此，我仍然坚持让答案可以解决。

我已经搜索了几天寻找一些非常简单的javascript代码可以提供帮助，但是人们发布的所有内容对初学者来说都太难了。

如果有人有任何简单的javascript代码可以帮助我的应用程序工作，或任何有用的提示，那将非常感谢。

我已尝试上传我的代码，但它不允许我这样做。我已设法将其上传到JSFiddle，这是链接 -

jsfiddle.net/0t9h82vs/ - This just needs to be copied into your URL bar

亲切的问候并感谢您的帮助！

Answer 1

我制作了你想要的非常简化的版本，以下是你如何做到这一点：
简单的HTML：

<div class="drag">Drag Me!</div>
<div class="drop">Drop Here!</div>

首先，我们首先声明var：

var activeE, clicking=false;

然后，为mousedown添加.drag事件：

$('.drag').mousedown(function(){
        activeE=this;//This sets the active element to this
        $(this).addClass('dragActive');//Adds the CSS class used
        clicking=true;//Sets the clicking variable to true
        $('body').addClass('noselect');//Not necessary, it just stops you from selecting text while dragging
    });

接下来，设置文档mouseup函数，以便在删除元素时重置所有变量：

$(document).mouseup(function(){
    clicking=false;//Not that much explaining needed, it just resets everything
    $('.dragActive').removeClass('dragActive');
    activeE=null;
    $('body').removeClass('noselect');
});

然后，我们添加一些代码，以便用户可以看到元素拖动：

   $(document).mousemove(function(e){
       if(clicking==true){
         var x = e.clientX,y = e.clientY;//jQuery methods, finds the cursors position.
         $('.drag').css({top:(y-($('.drag').height()/2)), left:(x-($('.drag').width()/2))});//And this changes the `activeE`'s position in mouse move.
        }
    });

然后，下降功能。非常简单，只需将activeE附加到.drop：

$('.drop').mouseup(function(){
    clicking=false;//again, resets.
    $(this).append(activeE);//and appends
    $('.dragActive').removeClass('dragActive');
    $('body').removeClass('noselect');
});

然后，用一点CSS来完成它：

.dragActive{
    pointer-events:none;
    position:absolute;
}
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor:move;
}

TADA！全部完了！

完成JS：

$(function(){
    var activeE, clicking=false;
    $('.drag').mousedown(function(){
        activeE=this;
        $(this).addClass('dragActive');
        clicking=true;
        $('body').addClass('noselect');
    });
    $(document).mouseup(function(){
        clicking=false;
        $('.dragActive').removeClass('dragActive');
        activeE=null;
        $('body').removeClass('noselect');
    });
    $(document).mousemove(function(e){
   if(clicking==true){
    var x = e.clientX,
        y = e.clientY;
    $('.drag').css({top:(y-($('.drag').height()/2)), left:(x-($('.drag').width()/2))});
    }
    });
    $('.drop').mouseup(function(){
        clicking=false;
        $(this).append(activeE);
        $('.dragActive').removeClass('dragActive');
        $('body').removeClass('noselect');
    });
});

和CSS：

    .drag{
    background:pink;
        padding:5px;
    border-radius:5px;
    width:100px;
    cursor:move;
}
.dragActive{
    pointer-events:none;
    position:absolute;
}
.drop{
    width:500px;
    height:500px;
    border:1px solid red;
}
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor:move;
}

Don't Forget The JSFiddle!!!

Answer 2

使用像这样的自定义J查询库。

http://jqueryui.com/demos/draggable/

这是实施。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #draggable { width: 150px; height: 150px; padding: 0.5em; }
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable();
  });
  </script>
</head>
<body>

<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>


</body>
</html>

Answer 3

    function dragDiv(event, div){
      // Drag set to false
      var drag = false;
      // Mouse down event listener
      div.addEventListener("mousedown", function( event ) {   
        // If mouse is down, drag is set to true
        drag = true;
        // Gets location of the div
        var top = event.clientY - div.style.top;
        var left = event.clientX - div.style.left;

        // Adds mouse move event listener to the body
        document.body.addEventListener("mousemove", function( event ) { 
          // If mouse is down
          if(drag){
            // Move the div with mouse
            div.style.top = event.clientY - top;
            div.style.left = event.clientX - left;
          }
        }, false);
        // Add mouse up event listener
        div.addEventListener("mouseup", function( event ) {   
          // If mouse is released, drag is set to false
          drag = false;
        }, false);
      }, false);
    };

在交互式应用程序中拖放游戏

3 个答案:

完成JS：

和CSS：

Don't Forget The JSFiddle!!!