javascript - 通过鼠标事件创建 div。类似于鼠标选择文件组

Question

我想编写一段javascript/jquery代码，实现鼠标选组。我想点击鼠标并按住它，这会创建一个 <div> ，然后按住鼠标，拖动它，<div>根据鼠标位置改变大小。然后当我松开鼠标时，<div>可以消失。我在处理这些鼠标事件和更改 <div> 的大小时遇到​​了麻烦.我不关心如何在 <div> 中选择元素然而。非常感谢您的帮助。

下面的代码几乎就是描述中的解决方案:

$(document).ready(function() {

  $("#displayWindow")
    .mouseup(function(e) {
      if (e.button == 2) {
        showMenu(e);
        return false;
      }
      return true;
    })
    .mousedown(function(e) {
      if (e.button == 2) {
        $("#displayWindow").append("<div id='div1'></div>");
        $('#div1').css('top', e.pageY);
        $('#div1').css('left', e.pageX);
        var clickedX = e.pageX;
        var clickedY = e.pageY;

        $("#displayWindow").on("mousemove", function(e) {
          if (e.button == 2) {
            $("#test").text("X: " + e.pageX + " Y: " + e.pageY);
            $('#div1').css('height', e.pageY - clickedY);
            $('#div1').css('width', e.pageX - clickedX);
            $('#test1').text($('#div1').width());
          }
        });

        return false;
      }
      return true;
    });

  $(document).click(function(e) {
    if (e.button == 0) {
      $('#menu').fadeOut(80);
    }
  });

  function showMenu(e) {
    $('#menu').css('left', e.pageX + 5);
    $('#menu').css('top', e.pageY + 5);
    $('#menu').fadeIn(100);
  }

  document.getElementById('displayWindow').oncontextmenu = function() {
    return false;
  }

}); // end ready

#displayWindow {
  background-color: white;
  border: 1px solid;
  height: 600px;
  width: 800px;
}
#div1 {
  background-color: lightgreen;
  position:absolute
}
#menu {
  position: absolute;
  display: none;
  background-color: white;
  border: 1px solid gray;
  box-shadow: 5px 5px 10px #474747;
  width: 60px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.menuItem {
  padding-left: 5px;
  padding-right: 5px;
  font-family: Arial, Helvetica, sans-serif;
  cursor: default;
}
.menuItem:hover {
  background-color: #D2D2D2;
}
.lineBreak {
  width: 95%;
  height: 1px;
  background-color: black;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="displayWindow"></div>
<h1 id="test"></h1>
<br>
<h1 id="test1"></h1>
<button id="testbtm">test</button>
<button id="testbtm2">test2</button>
<div id="menu">
  <div class="lineBreak"></div>
  <span class="menuItem" id="delete">delete</span>
</div>

Answer 1

我的建议很简单:使用jQuery selectable :

// make the whole document selectable
var widget = $(document).selectable({
  start: function(event, ui) {
    if (!event.ctrlKey) {
      // if the user not started the selection with CTRL + mousedown.....stop
      widget.mouse('_mouseStop');
    }
  },
  stop: function(event, ui) {  // get selected elements
    var elementsSelected = $('body').find('.ui-selected:not(SCRIPT)').map(function(index, element) {
      return 'Tagname=' + this.tagName + ' Text: ' + this.textContent;
    }).get().join();
    $('.ui-selected').removeClass('ui-selected');
    $('#log').text('Selected elements: ' + elementsSelected);
  }
});

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<p id="log">this is a para</p>
<p>aaaaa</p>
<textarea>this is a text area</textarea>
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
</ol>
<div>this is a div</div>