jQuery Draggable Input-Elemente

Ich versuche, die Elemente bilden, ziehbar mit jQuery UI. Zum Beispiel Schaltflächen, Kontrollkästchen, Textfelder, etc. Bisher hatte ich kein Glück. Haben Sie Ideen, wie dies zu erreichen?

InformationsquelleAutor awolfe | 2010-10-09
  1. 5

    Der trick besteht darin zu setzen, ein transparentes div über den Eingängen Elemente :

    div div{
    position:absolute;
    z-index:2;
    height: 100%;
    width: 100%;
}

div input{
    position:relative;
    z-index:1;
}
<div><div>&nbsp;</div><input type="text" value="..." disabled="true"/></div>
$('body>div').draggable();
    • Dies ist, was ich suchte. Ich brauchte, um anzuzeigen, Formularfelder, machen Sie beweglicher und unbrauchbar, ohne Ihr Aussehen zu verändern für eine WYSIWYG. Kann nicht glauben, ich glaube nicht an diese einfache Lösung.
    InformationsquelleAutor Jean F.
  2. 5

    Vielleicht 3 Jahre zu spät, aber man könnte dispatch-event und nutzen Sie dazu das folgende snippet für eine zu erwartende Verhalten:

    DEMO auf jsFiddle

    $(".draggable").draggable({
    start: function (event, ui) {
        $(this).data('preventBehaviour', true);
    }
});
$(".draggable").find(":input").on('mousedown', function (e) {
    var mdown = new MouseEvent("mousedown", {
        screenX: e.screenX,
        screenY: e.screenY,
        clientX: e.clientX,
        clientY: e.clientY,
        view: window
    });
    $(this).closest('.draggable')[0].dispatchEvent(mdown);
}).on('click', function (e) {
    var $draggable = $(this).closest('.draggable');
    if ($draggable.data("preventBehaviour")) {
        e.preventDefault();
        $draggable.data("preventBehaviour", false)
    }
});
    • initMouseEvent ist veraltet - keine Ahnung, was ersetzt es?
    • Thx für das feedback. Ich habe aktualisiert, Antwort mit MouseEvent() Konstruktor
    • Danke, es ist eine brillante Lösung für das problem,
    InformationsquelleAutor A. Wolff
  3. 3

    Ich denke, das Ihren Anforderungen am besten entspricht 🙂 Ihr ziehbar + Vergrößerbar auf input-element noch Sie nicht verloren Ihre Natur bearbeitet werden.

    $(function(){
    $('.draggable').draggable().resizable();
});

    Hier ist meine Lösung für Sie: mein jsFiddle.

    InformationsquelleAutor Roy Lee
  4. 2

    Sowie input-Elemente müssen bearbeitet werden, damit ziehbar würde Sie nicht bearbeitet werden.

    Wickeln Sie Sie in ein <span> oder eine <div>, und ich empfehle, Sie verwenden eine Griff.

    • Ja, aber was, wenn Sie nicht möchten, dass die Eingabe bearbeitet werden.
    InformationsquelleAutor Marko
  5. 0

    die beste Lösung ist, dass man Sie in ein div-oder span

    InformationsquelleAutor pluzzmo
Schreibe einen Kommentar