Wie ziehe ich ein Element nach oben, unten, rechts, links?
Ich arbeite an einer Schaltfläche für meine Elektronen-App, mit der Sie die Medien steuern können. Ich habe das Backend erstellt, aber für das Frontend möchte ich die Schaltfläche ziehen können, um die Medien zu steuern.
so weit habe ich das gemacht:
var className = ".media-controller";
var mousePos = 0;
var currentPos = 0;
var position = 0;
var draggable = false;
var offset = 100;
var dur = 1000;
var blockAnime;
$(document).on('mousedown', className, function() { currentPos = mousePos; draggable = true; blockAnime.pause(); }) $(document).on("mousemove", function(event) {
mousePos = event.pageY;
if (draggable) {
position = mousePos - currentPos;
$(className).css('transform', 'translateY(' + position / 2 + 'px)'); } if (position <= (offset * -1) && draggable) { center(); } if (position >= offset && draggable) { center(); } }) $(document).on("mouseup", function(event) {
draggable && center();
})
function center() {
draggable = false;
blockAnime = anime({
targets: className,
duration: dur,
translateY: 0,
})
}
center()
.media-controller {
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: 0.25vw;
color: white;
background-color: rgba(0, 0, 0, 0.3);
margin-right: 10px;
padding: 20px 50px;
text-align: center;
font-size: 6px;
margin: auto;
margin-top: 100px;
width: 20%;
user-select: none;
}
.bottom {
position: absolute;
bottom: 2px;
left: 0;
right: 0;
}
.top {
position: absolute;
top: 2px;
left: 0;
right: 0;
}
.left {
position: absolute;
top: 50%;
left: 4px;
transform: translateY(-50%);
}
.right {
position: absolute;
top: 50%;
right: 4px;
transform: translateY(-50%);
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div class="media-controller">
<i class="fal fa-chevron-up top"></i>
<i class="fal fa-chevron-down bottom"></i>
<i class="fal fa-chevron-right right"></i>
<i class="fal fa-chevron-left left"></i>
<div class="center">
<i class="fas fa-play"></i>
<i class="fas fa-pause"></i>
</div>
</div>
Ich habe animejs verwendet, aber dies ist nur für Auf und Ab. Ich weiß nicht wirklich, wie ich das für links und rechts machen soll. Ich möchte in der Lage sein, diese Schaltfläche in alle vier Richtungen zu ziehen.
wie kann ich das machen?
Antworten
Ich konnte dies tun, indem ich im Wesentlichen nur den Code kopierte, den Sie für Auf und Ab hatten, und die Variablen änderte, die für links und rechts geeignet waren. Hoffe das funktioniert bei dir:
var className = ".media-controller";
var mousePos = 0;
var mousePos1 = 0;
var currentPos = 0;
var currentPos1 = 0;
var position = 0;
var position1 = 0;
var draggable = false;
var draggable1 = false;
var offset = 100;
var dur = 1000;
var blockAnime;
$(document).on('mousedown', className, function() { currentPos = mousePos; draggable = true; blockAnime.pause(); }) $(document).on("mousemove", function(event) {
mousePos = event.pageX;
if (draggable) {
position = mousePos - currentPos;
$(className).css('transform', 'translateX(' + position / 2 + 'px)'); } if (position <= (offset * -1) && draggable) { center(); } if (position >= offset && draggable) { center(); } }) $(document).on("mouseup", function(event) {
draggable && center();
})
function center() {
draggable = false;
blockAnime = anime({
targets: className,
duration: dur,
translateX: 0,
})
}
center()
$(document).on('mousedown', className, function() { currentPos1 = mousePos1; draggable1 = true; blockAnime.pause(); }) $(document).on("mousemove", function(event) {
mousePos1 = event.pageY;
if (draggable1) {
position1 = mousePos1 - currentPos1;
$(className).css('transform', 'translateY(' + position1 / 2 + 'px)'); } if (position1 <= (offset * -1) && draggable1) { center1(); } if (position1 >= offset && draggable1) { center1(); } }) $(document).on("mouseup", function(event) {
draggable1 && center1();
})
function center1() {
draggable1 = false;
blockAnime = anime({
targets: className,
duration: dur,
translateY: 0,
})
}
center1()
.media-controller {
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: 0.25vw;
color: white;
background-color: rgba(0, 0, 0, 0.3);
margin-right: 10px;
padding: 20px 50px;
text-align: center;
font-size: 6px;
margin: auto;
margin-top: 100px;
width: 20%;
user-select: none;
}
.bottom {
position: absolute;
bottom: 2px;
left: 0;
right: 0;
}
.top {
position: absolute;
top: 2px;
left: 0;
right: 0;
}
.left {
position: absolute;
top: 50%;
left: 4px;
transform: translateY(-50%);
}
.right {
position: absolute;
top: 50%;
right: 4px;
transform: translateY(-50%);
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div class="media-controller">
<i class="fal fa-chevron-up top"></i>
<i class="fal fa-chevron-down bottom"></i>
<i class="fal fa-chevron-right right"></i>
<i class="fal fa-chevron-left left"></i>
<div class="center">
<i class="fas fa-play"></i>
<i class="fas fa-pause"></i>
</div>
</div>
Sie können jquery.ui.js importieren, das alle mit DOM verbundenen Funktionen enthält, und $ ("") aufrufen. Draggable () würde die Funktion für Sie übernehmen.
var className = ".media-controller";
var mousePos = 0;
var currentPos = 0;
var position = 0;
var draggable = false;
var offset = 100;
var dur = 1000;
var blockAnime;
$(".media-controller").draggable();
.media-controller {
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: 0.25vw;
color: white;
background-color: rgba(0, 0, 0, 0.3);
margin-right: 10px;
padding: 20px 50px;
text-align: center;
font-size: 6px;
margin: auto;
margin-top: 100px;
width: 20%;
user-select: none;
}
.bottom {
position: absolute;
bottom: 2px;
left: 0;
right: 0;
}
.top {
position: absolute;
top: 2px;
left: 0;
right: 0;
}
.left {
position: absolute;
top: 50%;
left: 4px;
transform: translateY(-50%);
}
.right {
position: absolute;
top: 50%;
right: 4px;
transform: translateY(-50%);
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div class="media-controller">
<i class="fal fa-chevron-up top"></i>
<i class="fal fa-chevron-down bottom"></i>
<i class="fal fa-chevron-right right"></i>
<i class="fal fa-chevron-left left"></i>
<div class="center">
<i class="fas fa-play"></i>
<i class="fas fa-pause"></i>
</div>
</div>
Zunächst möchte ich Ihnen allen für Ihre Antwort auf diese Frage danken.
Ich habe dieses Problem gelöst, indem ich Johns Antwort und diese Antwort gemischt habe .
Zuerst sollten wir feststellen, ob sich die Maus in X- oder Y-Richtung bewegt, und darauf basierend die Art und Weise ändern, wie sich die Schaltfläche bewegt.
var className = ".media-controller";
var mousePos = 0;
var currentPos = 0;
var position = 0;
var draggable = false;
var offset = 100;
var dur = 1000;
var blockAnime;
var last_position = {};
$(document).on('mousedown', className, function() { currentPos = mousePos; draggable = true; blockAnime.pause(); }) $(document).on("mousemove", function(event) {
if (typeof(last_position.x) != 'undefined') {
var deltaX = last_position.x - event.clientX,
deltaY = last_position.y - event.clientY;
// for ------------------ Y ------------------------
if (Math.abs(deltaX) > Math.abs(deltaY)) {
mousePos = event.pageX;
if(draggable) {
position = mousePos - currentPos;
$(className).css('transform', 'translateX(' + position / 2 + 'px)'); } // left if (position <= (offset * -1) && draggable) { center(); console.log("left"); } // right if (position >= offset && draggable) { center(); console.log("right"); } $('#output').text("X");
}
// for ------------------ Y ------------------------
else if (Math.abs(deltaY) > Math.abs(deltaX)) {
mousePos = event.pageY;
if(draggable) {
position = mousePos - currentPos;
$(className).css('transform', 'translateY(' + position / 2 + 'px)'); } // top if (position <= (offset * -1) && draggable) { center(); console.log("top"); } // bototm if (position >= offset && draggable) { center(); console.log("bottom"); } $('#output').text("Y");
}
}
last_position = {
x : event.clientX,
y : event.clientY
};
})
$(document).on("mouseup", function(event) {
draggable && center();
})
function center() {
draggable = false;
blockAnime = anime({
targets: className,
duration: dur,
translateX: 0,
translateY: 0
})
}
center()
.media-controller {
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: 0.25vw;
color: white;
background-color: rgba(0, 0, 0, 0.3);
margin-right: 10px;
padding: 20px 50px;
text-align: center;
font-size: 6px;
margin: auto;
margin-top: 100px;
width: 15%;
user-select: none;
}
.bottom {
position: absolute;
bottom: 2px;
left: 0;
right: 0;
}
.top {
position: absolute;
top: 2px;
left: 0;
right: 0;
}
.left {
position: absolute;
top: 50%;
left: 4px;
transform: translateY(-50%);
}
.right {
position: absolute;
top: 50%;
right: 4px;
transform: translateY(-50%);
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div class="media-controller">
<i class="fal fa-chevron-up top"></i>
<i class="fal fa-chevron-down bottom"></i>
<i class="fal fa-chevron-right right"></i>
<i class="fal fa-chevron-left left"></i>
<div class="center" id="output">
<i class="fas fa-play"></i>
<i class="fas fa-pause"></i>
</div>
</div>