Wie kann ich zwei ULs in Tabellenzellen-formatierten DIVs erhalten, um bündig zu sein?

jQuery(function() { 
 
    jQuery(".collection").sortable({}); 
 

 
    jQuery('li', jQuery('.collection')).draggable({ 
 
    'connectToSortable': '.collection', 
 
    'cancel': 'a.ui-icon', 
 
    'revert': 'invalid', 
 
    'containment': 'document', 
 
    'cursor': 'move' 
 
    }); 
 
});

body { 
 
    background-color: silver; 
 
    font-family: Verdana, Georgia; 
 
} 
 

 
div.main { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 740px; 
 
} 
 

 
div.table { 
 
    display: table; 
 
    width: 740px; 
 
} 
 

 
div.td { 
 
    display: table-cell; 
 
    margin-top: 0; 
 
    width: 50%; 
 
} 
 

 
div.tr { 
 
    display: table-row; 
 
} 
 

 
ul.collection { 
 
    background-color: white; 
 
    list-style: none; 
 
    padding-left: 0; 
 
    min-height: 100px; 
 
    padding-left: 0; 
 
    width: 200px; 
 
} 
 

 
ul.collection>li {} 
 

 
ul#selection { 
 
    right: 0; 
 
} 
 

 
ul#source {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" type="text/css" href="/stylesheets/page.css" /> 
 
</head> 
 

 
<body> 
 
    <div class="main"> 
 
    <div class="table"> 
 
     <div class="tr"> 
 
     <div class="td"> 
 
      <ul id="source" class="collection"> 
 
      <li class="draggable">Everything</li> 
 
      <li class="draggable">Nonfiction</li> 
 
      <li class="draggable">Fiction</li> 
 
      <li class="draggable">Poetry</li> 
 
      </ul> 
 
     </div> 
 
     <div class="td"> 
 
      <ul id="selection" class="collection"> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <script src="/javascripts/jquery.js"></script> 
 
    <script src="/javascripts/jquery-ui.js"></script> 
 
    <script> 
 
     jQuery(function() { 
 
     jQuery(".collection").sortable({}); 
 

 
     jQuery('li', jQuery('.collection')).draggable({ 
 
      'connectToSortable': '.collection', 
 
      'cancel': 'a.ui-icon', 
 
      'revert': 'invalid', 
 
      'containment': 'document', 
 
      'cursor': 'move' 
 
     }); 
 
     }); 
 
    </script> 
 
    </div> 
 
</body> 
 

 
</html>

Dieses Skript soll das machen LI ziehbar zwischen zwei UL. Wenn das ausgeführt wird, wird das bevölkerte UL in dem linken DELL in der Tabellenzelle nicht an die Spitze des Tabellen-DIV aufgereiht; es sieht so aus, als ob seine Oberseite locker (oder genau) mit dem Boden der leeren Tabellenzelle rechts ausgerichtet ist. Das Anfangsbild, mit einem anderen Hintergrund ist, wie folgt:

Wenn beide UL haben mindestens einen LI, dann sind sie bündig zur Oberseite ausgerichtet ist, wie gewünscht. Wenn der letzte LI übergezogen wird, kann ein Flickereffekt auftreten. Die gewünschte bündig Aussehen:

ich die Dinge setzen möchten, so dass beide UL an der Spitze sind, was ihre simulierten Tabellenzelle sein sollte, ob sie besetzt sind oder leer.

Quelle

2017-08-17 JonathanHayward

Vertically align die table-cell s durch vertical-align: top auf dem div.td Element verwendet. Dies wird die table-cell zu Stick an die Spitze zu sagen.

Siehe Demo unter:

jQuery(function() { 
 
    jQuery(".collection").sortable({}); 
 

 
    jQuery('li', jQuery('.collection')).draggable({ 
 
    'connectToSortable': '.collection', 
 
    'cancel': 'a.ui-icon', 
 
    'revert': 'invalid', 
 
    'containment': 'document', 
 
    'cursor': 'move' 
 
    }); 
 
});

body { 
 
    background-color: silver; 
 
    font-family: Verdana, Georgia; 
 
} 
 

 
div.main { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 740px; 
 
} 
 

 
div.table { 
 
    display: table; 
 
    width: 740px; 
 
} 
 

 
div.td { 
 
    display: table-cell; 
 
    margin-top: 0; 
 
    width: 50%; 
 
    vertical-align: top; 
 
} 
 

 
div.tr { 
 
    display: table-row; 
 
} 
 

 
ul.collection { 
 
    background-color: white; 
 
    list-style: none; 
 
    padding-left: 0; 
 
    min-height: 100px; 
 
    padding-left: 0; 
 
    width: 200px; 
 
} 
 

 
ul.collection>li {} 
 

 
ul#selection { 
 
    right: 0; 
 
} 
 

 
ul#source {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" type="text/css" href="/stylesheets/page.css" /> 
 
</head> 
 

 
<body> 
 
    <div class="main"> 
 
    <div class="table"> 
 
     <div class="tr"> 
 
     <div class="td"> 
 
      <ul id="source" class="collection"> 
 
      <li class="draggable">Everything</li> 
 
      <li class="draggable">Nonfiction</li> 
 
      <li class="draggable">Fiction</li> 
 
      <li class="draggable">Poetry</li> 
 
      </ul> 
 
     </div> 
 
     <div class="td"> 
 
      <ul id="selection" class="collection"> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <script src="/javascripts/jquery.js"></script> 
 
    <script src="/javascripts/jquery-ui.js"></script> 
 
    <script> 
 
     jQuery(function() { 
 
     jQuery(".collection").sortable({}); 
 

 
     jQuery('li', jQuery('.collection')).draggable({ 
 
      'connectToSortable': '.collection', 
 
      'cancel': 'a.ui-icon', 
 
      'revert': 'invalid', 
 
      'containment': 'document', 
 
      'cursor': 'move' 
 
     }); 
 
     }); 
 
    </script> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2017-08-17 14:29:09 kukkuz

Danke. Ich habe weitergedacht und möchte, dass LI auf den anderen UL umschaltet, wenn er geklickt hat. Ist das am besten mit einem jQuery.click() erledigt, das den LI von seinem gegenwärtigen UL entfernt und ihn an den anderen anhängt, oder gibt es einen besseren Weg mit den Gadgets? TIA, – JonathanHayward

Wie kann ich zwei ULs in Tabellenzellen-formatierten DIVs erhalten, um bündig zu sein?

Antwort

Verwandte Themen