时间戳

首页 > 解决方案 > 可以选择多个可拖动吗？

javascript - 可以选择多个可拖动吗？

问题描述

var drag = document.getElementById("drag");

drag.onclick = function(e){
  e.preventDefault();
}
#drag {
  width: 50px;
}
<select id="drag" multiple="">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

javascript是否可以停止保持选择效果并使其成为更改列表中元素顺序的拖动？

我试图e.preventDefault()并绑定一个draggable script选项，但没有工作

标签： javascripthtml

解决方案

我不认为你可以用 select element 做到这一点：

尝试更改您提供的代码制作一个简单的

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </body>
</html>

脚本.js：

$("ul").on('click', 'li', function (e) {
    if (e.ctrlKey || e.metaKey) {
        $(this).toggleClass("selected");
    } else {
        $(this).addClass("selected").siblings().removeClass('selected');
    }
}).sortable({
    connectWith: "ul",
    delay: 150, 
    revert: 0,

});

但是你可以使用多选插件，这里有一个演示

编辑：

如果您仍然想要选择标签外观，您可以使用dragOptions

$(document).ready(function(){
    $("#drag").dragOptions({
        onDrag: function(){
            console.log('onDrag callback: ', this);
        },
        onChange: function(){
            console.log('onChange callback: ', this);
        }
    });
});
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>drag</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  </head>
  <body>
    <div class="form-group">
    <select id="drag" size="5" class="form-control">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    </div>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://gitcdn.link/repo/NikitaKA/jquery.dragOptions/master/jquery.dragoptions.min.js" type="text/javascript" language="javascript"></script>
</html>

正如您在拖动选项时看到的那样，会发生错误（可能是问题））

如果有人能告诉我这里出了什么问题，我将不胜感激！

希望对某人有所帮助。

推荐阅读