使用jquery ui拖放排序功能需要更改css HTML 第1项 第2项 第3项 第4项 第5项 第1项 第2项 第3项 第4项 第5项 $(函数(){ $(“#可排序1,#可排序2”)。可排序({ connectWith:“.connectedSortable” }).disableSelection(); });

使用jquery ui拖放排序功能需要更改css HTML 第1项 第2项 第3项 第4项 第5项 第1项 第2项 第3项 第4项 第5项 $(函数(){ $(“#可排序1,#可排序2”)。可排序({ connectWith:“.connectedSortable” }).disableSelection(); });,jquery,Jquery,在上面的代码中,我需要的是当我将列表项从一个div拖到另一个div时,css属性“border”必须更改为“虚线border”,我的意思是,当我们移动到另一个div时,列表项的特定项边框必须更改。有人能帮我吗。您可以使用作为可排序api一部分的启动和停止函数。开始时,将边框更改为虚线。在停止时,将边框更改回实体 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8

在上面的代码中,我需要的是当我将列表项从一个div拖到另一个div时,css属性“border”必须更改为“虚线border”,我的意思是,当我们移动到另一个div时,列表项的特定项边框必须更改。有人能帮我吗。

您可以使用作为可排序api一部分的启动和停止函数。开始时,将边框更改为虚线。在停止时,将边框更改回实体

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />

        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <title>HTML</title>
        <meta name="description" content="" />
        <meta name="author" content="Sri Sahasra" />

        <meta name="viewport" content="width=device-width; initial-scale=1.0" />

        <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
        <link rel="shortcut icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
        <link rel="stylesheet" href="jquery-ui-1.10.4.custom.css" type="text/css" />
        <script src="jquery.js"></script>
        <script src="jquery_ui.js"></script>
    </head>

    <body>



</head>
<body>

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>





    <script>
  $(function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  });
  </script>

    </body>
</html>
}))

JSFIDLE示例-

我希望这有帮助

要包含边框颜色,您需要将css选项作为对象返回

$(function() {
$( "#sortable1, #sortable2" ).sortable({
  connectWith: ".connectedSortable",
    start: function(e,ui){
        ui.item.css('border-style', 'dashed');
    },
    stop: function(e,ui){
        ui.item.css('border-style', 'solid');
    }
}).disableSelection();

任何人都可以回答这个问题…请帮助我…这很紧急。你可以将css选项作为一个对象返回,并包含任何你想要更改的属性。答案更新为示例代码。-更新的提琴-非常感谢Jooj…我得到了解决方案,它也对我有效,但我只需要最新掉落的物品的边框颜色,而不需要旧的或以前的。任何想法@theJooj
ui.item.css({
            'border-style': 'dashed',
            'border-color': '#ff0000'
        });