Verschieben von Elementen zwischen zwei Listen über eine extra Fläche (handle)

[tscheboraschka]

Hallo,

ich habe hier eine Liste mit zwei droppable-Boxen, bei denen die Items von einer zur anderen Box geschoben werden koennen. Nun moechte ich das aber nur über eine Handle-Fläche verschiebbar machen.
Was muss ich ändern, damit das Ziehen nur mit einen bestimmten Bereich (Griff) möglich ist (der Rest z. B. auswählbarer Text)?

[Christian Marquardt]

https://jqueryui.com/droppable/

[tscheboraschka]

Hallo Christian,

ich moechte das hier nicht bzw. auf keinen Fall mit jquery machen. Es ist extra mit Vanilla deshalb angelegt.

[Christian Marquardt]

Das kann ich ja nicht wissen
https://stackabuse.com/drag-and-drop...la-javascript/

[tscheboraschka]

Ja, genauso weit bin ich jetzt exakt auch. Dort gibt es auch kein Handle. Mein Skript ohne Handle funktioniert ja bestens. Das handle soll aber die Arbeit machen eben. Das ist hier meine Fragestellung.

[Christian Marquardt]

Ich weiß nicht, was eine "Handle-Fläche" ist. Sofern ein Objekt nur an einer bestimmten Stelle abgelegt werden darf, kann man das mit dragOver/dragDrop regeln

[tscheboraschka]

Das hat mit dem Ablegen überhaupt nichts zu tun. handle bedeutet Griff auf Deutsch. Also eine Art 'Grifffläche', wie bei dem scharfen Messer. Das fasst man auch nur am Griff an und nicht an der Schneide, kann das Messer auch dann mit Griff und Schneide bewegen.

[tscheboraschka]

Wie in fiddle zu sehen, da ist diese Fläche mit handle bezeichnet. Aber es muss natürlich das ganze Element dann bewegt werden.

[Christian Marquardt]

Beim Begriff Handle kommt es auf den Kontext an. Windows -> Resource

Wie in fiddle zu sehen,

Naja, ich sehe da keine Handle-Flache

[tscheboraschka]

https://jsfiddle.net/Reksio/kp21vzms/10/
Das ist der hinterlegte Link. Aber hier wurde ab der Domain alles abgeschnitten. Wenn ich das editieren will, sehe ich aber den kompletten Link. Deshalb hier nochmal im Kommentar vielleicht besser.

[basti1012]

Deine Erklärung finde ich etwas schwer. Ich verstehe das so , dass du nicht auf der ganze Boxe klicken willst zum Verschieben , sondern nur an einer bestimmten Stelle (wie ein Griff). Zb die roten Bereiche sind mal der Griff, und der Rest der Boxe ist die klingen die man nicht anpacken soll.

https://basti1012.bplaced.net/index....r-forum&id=660



Meinst du das so ungefähr?
Ist jetzt nur ein Beispiel, damit ich vielleicht dein Vorhaben besser verstehe. Falls du das so ungefähr meinst, gibt es aber bessere Wege als meiner jetzt , muss aber auch erst überlegen wie man das besser machen könnte (vielleicht mit einer stumpfen klinge)

[tscheboraschka]

Basti 1012:
Danke dir für deine Hilfe. Vom Prinzip her ist das etwa so gemeint. Nur das die Griff-Fläche, mit Griff (handle) bezeichnet, dazu benutzt werden sollte. Ist das um einiges aufwendiger, wenn dazu der div-Container mit der handle-Klasse benutzt wird?

Ich habe jetzt das hier so probiert:
https://jsfiddle.net/Reksio/kp21vzms/15/


Im Content-Div würde ich aber gern den Text nicht nur auswählbar, sondern auch gern einen Link im Text anklickbar machen wollen. Das geht dann damit noch nicht.


CSS dann so:

.draggable {
margin: 1rem 1rem;
min-width: 10rem;
max-width: 10rem;
pointer-events: none;
display: inline-block;
padding: 5px;
text-align: center;
font-size: 1rem;
color: #e9550c;
min-height: 9rem;
background-color: rgba(240, 240, 240, 0.7);
border: 1px solid #CCC;
border-radius: 0.5rem;
transition: var(--transitionTime);
}

.handle {
cursor: move;
pointer-events: auto;
background: #FEF;
width: 100%;
border: 1px solid #333;
}
.content {
-webkit-user-select: all; /* Chrome 49+ */
-moz-user-select: all; /* Firefox 43+ */
-ms-user-select: all; /* No support yet */
user-select: all; /* Likely future */
cursor: pointer;
}
.link {
cursor: pointer;
}