Question

我很难解决以下问题：我的一个名单#cardHolder会在我拖动项目时向下移动。我知道它与CSS有关，但我似乎无法修复它。任何帮助表示赞赏。

＆＃13;

$(document).ready(function () {
    $( "#cardHolder, #hand" ).sortable({
      connectWith: ".connectedSortable",
      receive: function(event, ui) {
      var $this = $(this);
      if ($this.children('li').length > 1 && $this.attr('id') != "hand") {
      console.log('Only one per list!');
      $(ui.sender).sortable('cancel');
            }
      }

    }).disableSelection();
});

＆＃13;

#trumpHolder{
    border: 5px solid #ccc;
    padding: 5px;
    height: 250px;
    width: 150px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;

}
#holderWrapper{
    width: 100%;
    text-align: center;

}
#cardHolder {
    border: 5px solid #ccc;
    padding: 5px;
    height: 250px;
    width: 150px;
    margin: 5px 5px 5px 5px;
    display: inline-block;
}
#cardHolderOther{
    border: 5px solid #ccc;
    padding: 5px;
    height: 250px;
    width: 150px;
    display: inline-block;
    margin: 5px 5px 5px 5px;
}
.table{
    display: table;
    margin: 0 auto;


}
#hand {
    height: 250px;
    border: 5px solid #ccc;
    padding: 0;
    width: 100%;
    clear: both;
    margin-top: 5px;

}

#cardHolder li, #hand li {
    margin: 7px 7px 7px 7px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
    display: inline-block;
}

＆＃13;

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://code.jquery.com/ui/1.8.24/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="boerenbridge.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="boerenbridge.css">


<ul id="trumpHolder" class="connectedSortable">

</ul>
<div id="holderWrapper">
<ul id="cardHolder" class="connectedSortable">

</ul>
<ul id="cardHolderOther" class="connectedSortable">

</ul>
</div>
<div class="table">
<ul id="hand" class="connectedSortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
</div>

＆＃13;

以下是代码：

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Boerenbridge</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://code.jquery.com/ui/1.8.24/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="boerenbridge.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="boerenbridge.css">
</head>
<body>
<ul id="trumpHolder" class="connectedSortable">

</ul>
<div id="holderWrapper">
<ul id="cardHolder" class="connectedSortable">

</ul>
<ul id="cardHolderOther" class="connectedSortable">

</ul>
</div>
<div class="table">
<ul id="hand" class="connectedSortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
</div>
</body>

CSS

#trumpHolder{
    border: 5px solid #ccc;
    padding: 5px;
    height: 250px;
    width: 150px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;

}
#holderWrapper{
    width: 100%;
    text-align: center;

}
#cardHolder {
    border: 5px solid #ccc;
    padding: 5px;
    height: 250px;
    width: 150px;
    margin: 5px 5px 5px 5px;
    display: inline-block;
}
#cardHolderOther{
    border: 5px solid #ccc;
    padding: 5px;
    height: 250px;
    width: 150px;
    display: inline-block;
    margin: 5px 5px 5px 5px;
}
.table{
    display: table;
    margin: 0 auto;


}
#hand {
    height: 250px;
    border: 5px solid #ccc;
    padding: 0;
    width: 100%;
    clear: both;
    margin-top: 5px;

}

#cardHolder li, #hand li {
    margin: 7px 7px 7px 7px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
    display: inline-block;
}

使用Javascript / Jquery的

$(document).ready(function () {
    $( "#cardHolder, #hand" ).sortable({
      connectWith: ".connectedSortable",
      receive: function(event, ui) {
      var $this = $(this);
      if ($this.children('li').length > 1 && $this.attr('id') != "hand") {
      console.log('Only one per list!');
      $(ui.sender).sortable('cancel');
            }
      }

    }).disableSelection();
});

Answer 1

在使用vertical-align: top;时将#cardHolder添加到display: inline-block以确保它贴在顶部，否则会尝试将其与默认值baseline对齐{ {3}}了解有关vertical-align和inline元素的更多信息。

左下方是vertical-align使用默认baseline值的示例，右侧是使用top值的示例。

＆＃13;

.inline-list {
  width: 250px;
  float: left;
}

.inline-list div {
  display: inline-block;
  border: 3px solid #444;
  margin: 0; 
  padding: 0;
}

.inline-list .cardholder {
  width: 100px;
  height: 100px;
}

.inline-list.align .cardholder {
  vertical-align: top;
}

＆＃13;

<div class="inline-list">
    <div class="cardholder">Some text</div>
    <div class="cardholder"></div>
  </div>

  <div class="inline-list align">
    <div class="cardholder">Some text</div>
    <div class="cardholder"></div>
  </div>

＆＃13;

Answer 2

只需添加到您的css：

#cardHolder {
    vertical-align : top;
    ...

请参阅下面的工作示例！

$(document).ready(function () {
    $( "#cardHolder, #hand" ).sortable({
      connectWith: ".connectedSortable",
      receive: function(event, ui) {
      var $this = $(this);
      if ($this.children('li').length > 1 && $this.attr('id') != "hand") {
      console.log('Only one per list!');
      $(ui.sender).sortable('cancel');
            }
      }

    }).disableSelection();
});

#trumpHolder{
    border: 5px solid #ccc;
    padding: 5px;
    height: 250px;
    width: 150px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;

}
#holderWrapper{
    width: 100%;
    text-align: center;

}
#cardHolder {

    vertical-align : top; /* <--------------- MODIFICATION */

    border: 5px solid #ccc;
    padding: 5px;
    height: 250px;
    width: 150px;
    margin: 5px 5px 5px 5px;
    display: inline-block;
}
#cardHolderOther{
    border: 5px solid #ccc;
    padding: 5px;
    height: 250px;
    width: 150px;
    display: inline-block;
    margin: 5px 5px 5px 5px;
}
.table{
    display: table;
    margin: 0 auto;


}
#hand {
    height: 250px;
    border: 5px solid #ccc;
    padding: 0;
    width: 100%;
    clear: both;
    margin-top: 5px;

}

#cardHolder li, #hand li {
    margin: 7px 7px 7px 7px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
    display: inline-block;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://code.jquery.com/ui/1.8.24/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="boerenbridge.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="boerenbridge.css">


<ul id="trumpHolder" class="connectedSortable">

</ul>
<div id="holderWrapper">
<ul id="cardHolder" class="connectedSortable">

</ul>
<ul id="cardHolderOther" class="connectedSortable">

</ul>
</div>
<div class="table">
<ul id="hand" class="connectedSortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
</div>

列表向下移动项目放置

2 个答案: