Ein Problem beim Ziehen sortierbar von Handle in jquery Ui

Das Problem, das ich habe, ist, dass, wenn ich versuche, mit einem Griff ziehen und ablegen, während Drag & Drop, wird der Text nicht ausgerichtet mit dem Text, der ist in dem am Ende angehängten Code dargestellt.Ein Problem beim Ziehen sortierbar von Handle in jquery Ui

Der Grund, warum ich nicht lieber den Griff in den <p>-Tags setzen, da einige der Beispiele auf der Web zeigt, ist, dass ich zwischen den p-Tags das Zeug Benutzer anstelle bearbeiten ermöglichen möchte, daher i will nicht gehen und eine Menge Vorverarbeitung (ich kann mehr Sachen um die p-Tags hinzufügen) vor dem Anzeigen des Formulars.

Wenn jemand etwas Licht auf diese Angelegenheit werfen kann, würde es sehr geschätzt werden!

-Code, mit Google CDN, so sollte es einfach funktionieren:

<head> 
    <style type="text/css"> 
    #container{ 
     width:500; 
    } 
    .handle{ 
     float:left; 
    } 
    . 
    </style> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
    <script type="text/javascript"> 
    $(function(){ 
     $('#container').sortable({ 
      revert:true, 
      handle:'.handle', 
     }); 
    }); 
    </script> 
</head> 
<div id="container"> 
<div class="c"><span class="handle">HH</span><p>Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p></div> 

<div class="c"><span class="handle">HH</span><p>Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p></div> 
</div>

Quelle

2009-08-06 FurtiveFelon

Das Problem ist, dass, wenn das div die Sortierung zu tun gezogen wird, jQuery effektiv eingestellt ist die draggable (so div.c in Ihrem Fall) absolut positioniert sein (damit es sich um den Bildschirm bewegen kann). Nicht sicher über die genauen CSS-Macken (vielleicht jemand klüger als ich ausführlicher erklären kann), aber im Grunde funktioniert Ihr Floating .handle ein bisschen seltsam in Verbindung mit der , wenn in einem absolut positionierten Container. Die Ränder auf der scheinen jetzt von der Innenseite von div gesetzt zu sein, anstatt mit ihnen zu verschmelzen, während die span immer noch nach oben links vom div schwebt.

Eine Lösung besteht darin, den gleichen oberen Rand zum span wie zum p hinzuzufügen, aber nur während des Ziehens. Mit anderen Worten hinzufügen (glaube ich 1em sollte der Standard-Marge auf die Oberseite des p angewendet werden), um die folgenden CSS:

.ui-sortable-helper .handle { 
    margin-top: 1em; 
}

Wenn Sie in einzutauchen mehr in die CSS interessiert sind, fügen Sie folgendes zu Ihrem obigen Code & reproduzieren Sie das Problem, ohne dass die Sortierung erforderlich ist:

.c { width: 500px; height: 40px; position: absolute; }

Quelle

2009-08-06 07:05:57 Alconja

Ein Problem beim Ziehen sortierbar von Handle in jquery Ui

Antwort

Verwandte Themen