Ich möchte ein Segment von Javascript/jquery Code erstellen, die die Gruppenauswahl per Maus erreichen kann. Ich möchte auf die Maus klicken und halten Sie diese, erstellen Sie eine <div>
, dann halten Sie die Maus, ziehen Sie es, die <div>
Größe ändern, je nach der Mausposition. Wenn ich dann die Maus loslasse, kann die <div>
verschwinden. Ich habe Probleme mit diesen Mausereignissen und ändere die Größe von <div>
. Es ist mir egal, wie Sie das Element innerhalb der <div>
noch auswählen. Vielen Dank für die Hilfe.div durch Mausereignis erstellen. ähnlich wie Dateigruppenauswahl mit der Maus
Die Folge Code ist fast die Lösung als Beschreibung:
$(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>
Was hast du bisher versucht? Bitte teilen Sie den Code, den Sie geschrieben haben. Denken Sie daran, [MCVE!] (Http://stackoverflow.com/help/mcve) – SimianAngel