写一个jQuery双向选择穿梭框 要求如下：1、通过鼠标单选或多选数据然后点击按钮穿梭，按钮要在左右两边边框的中间垂直居中 2、加上左右两边穿梭框的边框

好的，以下是满足要求的 jQuery 双向选择穿梭框：

HTML：

<div class="transfer-panel">
  <div class="left-panel">
    <h3>可选项</h3>
    <div class="panel-content">
      <ul id="left-list" class="option-list"></ul>
    </div>
  </div>
  <div class="transfer-buttons">
    <button id="move-right" class="btn">&gt;</button>
    <button id="move-left" class="btn">&lt;</button>
  </div>
  <div class="right-panel">
    <h3>已选项</h3>
    <div class="panel-content">
      <ul id="right-list" class="option-list"></ul>
    </div>
  </div>
</div>

CSS：

.transfer-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left-panel,
.right-panel {
  border: 1px solid #ccc;
  padding: 10px;
}

.panel-content {
  height: 200px;
  overflow-y: auto;
}

.option-list {
  list-style: none;
  padding: 0;
}

.btn {
  display: block;
  margin-bottom: 10px;
}

JavaScript：

$(document).ready(function() {
  var data = [
    { id: 1, text: "选项1" },
    { id: 2, text: "选项2" },
    { id: 3, text: "选项3" },
    { id: 4, text: "选项4" },
    { id: 5, text: "选项5" }
  ];

  // 渲染选项列表
  function renderOptions() {
    var $leftList = $("#left-list");
    var $rightList = $("#right-list");
    
    $leftList.empty();
    $rightList.empty();
    
    $.each(data, function(index, item) {
      var $option = $("<li>")
        .attr("data-id", item.id)
        .text(item.text);
        
      $leftList.append($option);
    });
  }
  
  // 绑定选项点击事件
  function bindOptionClick() {
    $(".option-list li").on("click", function() {
      $(this).toggleClass("selected");
    });
  }
  
  // 穿梭选中的选项
  function moveSelectedItems(direction) {
    var $sourceList, $targetList;
    
    if (direction === "right") {
      $sourceList = $("#left-list");
      $targetList = $("#right-list");
    } else if (direction === "left") {
      $sourceList = $("#right-list");
      $targetList = $("#left-list");
    }
    
    var $selectedItems = $sourceList.find(".selected");
    $selectedItems.appendTo($targetList);
    $selectedItems.removeClass("selected");
  }
  
  // 初始化穿梭框
  function initTransferPanel() {
    renderOptions();
    bindOptionClick();
    
    $("#move-right").on("click", function() {
      moveSelectedItems("right");
    });
    
    $("#move-left").on("click", function() {
      moveSelectedItems("left");
    });
  }
  
  initTransferPanel();
});

这个代码创建了一个带有边框的双向选择穿梭框。左侧是可选项列表，右侧是已选项列表。通过点击选项来单选或多选，然后点击按钮将选中的选项穿梭到对应的列表中。穿梭按钮位于左右两侧的中间垂直居中位置。

希望这次回答满足了你的要求！如果还有其他问题，请随时提问。