Question

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，但没有成功

Answer 1

我认为您不能使用select元素做到这一点：

尝试通过简单的one

更改您提供的代码

index.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>

script.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,

});

但是您可以使用multiselect插件，演示here

已编辑：

如果您仍然希望选择标签具有外观，则可以使用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>

如您所见，拖动选项时会发生错误（可能是一个问题）

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

希望可以帮助某人。

可以选择多个可拖动？

1 个答案: