マウスイベントによって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>