掉出盒子的物品

我正在嘗試使用 jquery UI draggable and droppable 進行拖放，它正在作業，但使用拖放部分，但是當我釋放對活動選項卡的單擊時，li 將移至框的末尾

發生這樣的事情我該如何解決這個問題？

代碼部分：html：

<div class="card-body" id="divset">
               <div class="defaults">
                <div class="heading"><h4>Default Fields</h4></div>
                <div class="defaultItems">
                    <ul id="source">
                        @foreach($structs as $struct)
                            <li data-id="{{ $struct->id }}" data-value="inps">{{ $struct->label }}</li>
                        @endforeach
                    </ul>
                </div>
                
               </div>
               <div hljs-string">" id="activeInp">
                    <h4>Active Input Fields</h4>
                    <ul hljs-string">" id="items">

                    </ul>
               </div>
               
            </div> <!-- end card body-->

CSS：

.defaults{
    font-size: 20px;
    width: 50%;
    display: inline-block;
    flex-direction: row;
    padding: 5px;
    border: 1px solid darkblue;
}
.defaults li{
    border: 1px solid black;
    background: #BDBEBD;
    color:black;
    padding: 5px;
}
.activeInp{
    flex-direction: row;
    padding: 5px;
}
#divset{
    display: flex;
    padding: 15px;
    height: 30rem;
}

.heading{
    letter-spacing: 1px;
    font-size: 15px;
    height: 10px;
    flex-direction: row;
    width: 100%;
}
.defaultItems{
    flex-direction: row;
    width: 100%;
    padding: 25px;
}

.activeInp li{
    border: 1px solid black;
    background: #BDBEBD;
    color:rgb(6, 128, 22);
    font-weight: 700;
    padding: 5px;
}
.activeInp{
    font-size: 20px;
    width: 50%;
    display: inline-block;
    flex-direction: row;
    padding: 5px;
    border: 1px solid darkcyan;
    justify-content: left;

}

查詢：

var ids = [];
    $('#source li').draggable({
        revert : function(event, ui) {
            // on older version of jQuery use "draggable"
            // $(this).data("draggable")
            // on 2.x versions of jQuery use "ui-draggable"
            // $(this).data("ui-draggable")
            $(this).data("uiDraggable").originalPosition = {
                top : 0,
                left : 0
            };
            // return boolean
            return !event;
            // that evaluate like this:
            // return event !== false ? false : true;
        }
    });
    $('#activeInp').droppable({
        drop:function(event,ui){
            accept:'li[data-value="inps"]'
            $('#items').append(ui.draggable);
            ids.push(ui.draggable.attr("data-id"));
            
        }
    });

任何幫助將不勝感激

uj5u.com熱心網友回復：

請考慮以下內容，但有一點小改動：

$(function() {
  var ids = [];
  $('#source li').draggable({
    revert: "invalid"
  });
  $('#activeInp').droppable({
    accept: 'li[data-value="inps"]',
    drop: function(event, ui) {
      $('#items').append(ui.draggable.attr("style", ""));
      ids.push(ui.draggable.attr("data-id"));
    }
  });
});

.defaults {
  font-size: 20px;
  width: 50%;
  display: inline-block;
  flex-direction: row;
  padding: 5px;
  border: 1px solid darkblue;
}

.defaults li {
  border: 1px solid black;
  background: #BDBEBD;
  color: black;
  padding: 5px;
}

.activeInp {
  flex-direction: row;
  padding: 5px;
}

#divset {
  display: flex;
  padding: 15px;
  height: 30rem;
}

.heading {
  letter-spacing: 1px;
  font-size: 15px;
  height: 10px;
  flex-direction: row;
  width: 100%;
}

.defaultItems {
  flex-direction: row;
  width: 100%;
  padding: 25px;
}

.activeInp li {
  border: 1px solid black;
  background: #BDBEBD;
  color: rgb(6, 128, 22);
  font-weight: 700;
  padding: 5px;
}

.activeInp {
  font-size: 20px;
  width: 50%;
  display: inline-block;
  flex-direction: row;
  padding: 5px;
  border: 1px solid darkcyan;
  justify-content: left;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="card-body" id="divset">
  <div class="defaults">
    <div class="heading">
      <h4>Default Fields</h4>
    </div>
    <div class="defaultItems">
      <ul id="source">
        <li data-id="item-1" data-value="inps">Item 1</li>
        <li data-id="item-2" data-value="slct">Item 2</li>
        <li data-id="item-3" data-value="inps">Item 3</li>
        <li data-id="item-4" data-value="inps">Item 4</li>
        <li data-id="item-5" data-value="inps">Item 5</li>
      </ul>
    </div>
  </div>
  <div class="activeInp" id="activeInp">
    <h4>Active Input Fields</h4>
    <ul class="items" id="items"></ul>
  </div>
</div>
<!-- end card body-->

你會看到我已經洗掉了元素樣式。這由 Drag 更新它的位置。這將確保用戶可以洗掉該專案并洗掉所有樣式：

$('#items').append(ui.draggable.attr("style", ""));

您可能還想查看Sortable Connected Lists，因為這將更輕松地完成您想要的操作。

標籤：css 拉拉维尔 jQuery-ui laravel-刀片

上一篇：如何回圈這些計算以獲得最多10條記錄的輸出并以表格格式顯示它們？

下一篇：jquery-UI：可拖動的div僅垂直拖動，而不是水平拖動