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