javascript - 为什么取消选择不适用于可选择和可拖动的多个项目
问题描述
我希望我的unselection
列表项工作顺利.selectable()
.draggable()
gif
我的selectable
期望如下所示draggable
:
上面的代码没有draggable
:
$("#selectable").selectable();
#feedback {
font-size: 1.4em;
}
#selectable .ui-selecting {
background: #FECA40;
}
#selectable .ui-selected {
background: #F39814;
color: white;
}
#selectable {
list-style-type: none;
margin: 0;
padding: 0;
width: 60%;
}
#selectable li {
margin: 3px;
padding: 0.4em;
font-size: 1.4em;
height: 18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
问题: 下面的组合 selectable
和draggable
选择和取消选择不能像上面的代码一样工作,只有selectable
这是我尝试过的:
$(function() {
$( "#selectable" ).selectable({
start: function (event, ui) {
/* $('.ui-widget-content').draggable('destroy') */;
},
stop: function(event,ui){
$('.ui-widget-content').draggable({
drag: function(event,ui){
console.log('dragging....');
$('#multiple_selected_rows').remove();
var elem = document.createElement("div");
elem.id = "multiple_selected_rows";
elem.innerText = $('li.ui-selected').length+" items";
document.body.appendChild(elem);
$("#multiple_selected_rows").css({ 'top': event.clientY + 10, 'left': event.clientX + 10 });
}
});
$( "#selectable" ).selectable();
}
});
$('#droppable').droppable({
accept: '.ui-widget-content',
greedy: true,
drop: function (event, ui) {
$('#multiple_selected_rows').remove();
}
});
});
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; /*width: 60%;*/ padding:22px; border: solid 1px #0973c7;}
#selectable li { margin: 8px; padding:10px; border:solid 1px #CCC;}
.ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; }
#main-container{
display: flex;
justify-content: space-between;
}
div#main-container .demo {
width: 50%;
margin-right: 7px;
}
div#main-container #droppable {
flex: 1;
border: 1px solid red;
}
#multiple_selected_rows{
position:absolute;
width: 90px;
height:40px;
background:red;
color: #fff;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="main-container">
<div class="demo">
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
</div>
<div id="droppable">
</div>
</div>
请帮助我提前谢谢!!!!!!!
解决方案
注意:如果要将选定的项目拖动到另一个框,则无法通过拖动选择多个项目然后通过单击立即仅选择单个项目(如 gif 所示)的方式。您可以使用 拖动选择selectable()
项,也可以使用 拖动(即移动)您选择的项目draggable()
,不能同时使用两者。
您selectable()
和draggable()
方法正在为相同的鼠标事件相互竞争。因此,不要在页面加载时设置它们,试试这个:
在selectable()
stop
回调中,将所选元素包装在 div 中:
$('.ui-selected').wrapAll('<div id="dragSet"></div>');
然后打电话draggable()
。#dragSet
现在此调用将优先于selectable()
所选项目的鼠标事件。
在draggable()
stop
回调中,将所选项目附加到#droppable
并删除它们的.ui-selected
类。
$('#droppable').append( $('#dragSet') );
$('#dragSet').contents().unwrap();
$('#droppable li').removeClass('ui-selected');
最后,在selectable()
start
回调中添加一些逻辑以防止双重包装您的选择。
if ( $('#dragSet').children().length > 0 ) $('#dragSet').contents().unwrap();
else $('#dragSet').remove();
请参阅下面的工作示例:
$(function() {
$("#selectable").selectable({
start: function(event, ui) {
if ($('#dragSet').children().length > 0) $('#dragSet').contents().unwrap();
else $('#dragSet').remove();
},
stop: function(event, ui) {
$('.ui-selected').wrapAll('<div id="dragSet"></div>');
$('#dragSet').draggable({
stop: function(event, ui) {
$('#droppable').append($('#dragSet'));
$('#dragSet').contents().unwrap();
$('#droppable li').removeClass('ui-selected');
}
});
}
});
});
#feedback {
font-size: 1.4em;
}
#selectable .ui-selecting {
background: #FECA40;
}
#selectable .ui-selected {
background: #F39814;
color: white;
}
#selectable {
list-style-type: none;
margin: 0;
padding: 0;
/*width: 60%;*/
padding: 22px;
border: solid 1px #0973c7;
}
#selectable li {
margin: 8px;
padding: 10px;
border: solid 1px #CCC;
}
.ui-selectable-helper {
position: absolute;
z-index: 100;
border: 1px dotted black;
}
#main-container {
display: flex;
justify-content: space-between;
}
div#main-container .demo {
width: 50%;
margin-right: 7px;
}
div#main-container #droppable {
flex: 1;
border: 1px solid red;
}
#multiple_selected_rows {
position: absolute;
width: 90px;
height: 40px;
background: red;
color: #fff;
text-align: center;
}
#droppable li.ui-widget-content {
margin: 8px;
padding: 10px;
border: solid 1px #ccc;
color: white;
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="main-container">
<div class="demo">
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
</div>
<div id="droppable">
</div>
</div>
奖金:
要来回拖动,重复相同的 JS 并#selectable
用#droppable
.
$(function() {
$("#selectable").selectable({
start: function(event, ui) {
if ($('#dragSet').children().length > 0) $('#dragSet').contents().unwrap();
else $('#dragSet').remove();
},
stop: function(event, ui) {
$('.ui-selected').wrapAll('<div id="dragSet"></div>');
$('#dragSet').draggable({
stop: function(event, ui) {
$('#droppable').append($('#dragSet'));
$('#dragSet').contents().unwrap();
$('#droppable li').removeClass('ui-selected');
}
});
}
});
$("#droppable").selectable({
start: function(event, ui) {
if ($('#dragSet').children().length > 0) $('#dragSet').contents().unwrap();
else $('#dragSet').remove();
},
stop: function(event, ui) {
$('.ui-selected').wrapAll('<div id="dragSet"></div>');
$('#dragSet').draggable({
stop: function(event, ui) {
$('#selectable').append($('#dragSet'));
$('#dragSet').contents().unwrap();
$('#selectable li').removeClass('ui-selected');
}
});
}
});
});
#feedback {
font-size: 1.4em;
}
#selectable .ui-selecting,
#droppable .ui-selecting {
background: #FECA40;
}
#selectable .ui-selected,
#droppable .ui-selected {
background: #F39814;
color: white;
}
#selectable,
#droppable {
list-style-type: none;
margin: 0;
padding: 0;
padding: 22px;
border: solid 1px #0973c7;
}
#selectable li,
#droppable li {
margin: 8px;
padding: 10px;
border: solid 1px #CCC;
}
.ui-selectable-helper {
position: absolute;
z-index: 100;
border: 1px dotted black;
}
#main-container {
display: flex;
justify-content: space-between;
}
div#main-container .demo {
width: 50%;
margin-right: 7px;
}
div#main-container #droppable {
flex: 1;
border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="main-container">
<div class="demo">
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
</div>
<div id="droppable">
</div>
</div>
Selectable and Draggable with selection 如 gif 所示:
通常,您需要单击所选项目才能拖动它们。但是由于您希望能够单击它们以进行新选择,因此您需要添加另一个元素作为手柄来拖动它们。
$(function() {
$( "#selectable" ).selectable({
start: function (event, ui) {
if ( $('#dragSet').children().length > 0 ) {
$('#dragHandle').remove();
$('#dragSet').contents().unwrap();
}
else $('#dragSet').remove();
},
stop: function(event,ui){
$('.ui-selected').wrapAll('<div id="dragSet"></div>');
$('#dragSet').append('<div id="dragHandle">Drag Me</div>');
$('#dragHandle').on('mouseenter', function() {
$('#dragSet').draggable({
stop: function(event, ui){
$('#droppable').append( $('#dragSet') );
$('#dragHandle').remove();
$('#dragSet').contents().unwrap();
$('#droppable li').removeClass('ui-selected');
}
});
}).on('mouseleave', function() {
$('#dragSet').draggable('destroy');
});
}
});
$( "#droppable" ).selectable({
start: function (event, ui) {
if ( $('#dragSet').children().length > 0 ) {
$('#dragHandle').remove();
$('#dragSet').contents().unwrap();
}
else $('#dragSet').remove();
},
stop: function(event,ui){
$('.ui-selected').wrapAll('<div id="dragSet"></div>');
$('#dragSet').append('<div id="dragHandle">Drag Me</div>');
$('#dragHandle').on('mouseenter', function() {
$('#dragSet').draggable({
stop: function(event, ui){
$('#selectable').append( $('#dragSet') );
$('#dragHandle').remove();
$('#dragSet').contents().unwrap();
$('#selectable li').removeClass('ui-selected');
}
});
}).on('mouseleave', function() {
$('#dragSet').draggable('destroy');
});
}
});
});
#feedback {
font-size: 1.4em;
}
#selectable .ui-selecting,
#droppable .ui-selecting {
background: #FECA40;
}
#selectable .ui-selected,
#droppable .ui-selected {
background: #F39814;
color: white;
}
#selectable,
#droppable {
list-style-type: none;
margin: 0;
padding: 0;
padding:22px;
border: solid 1px #0973c7;
}
#selectable li,
#droppable li {
margin: 8px;
padding:10px;
border:solid 1px #CCC;
}
.ui-selectable-helper {
position: absolute;
z-index: 100;
border:1px dotted black;
}
#main-container{
display: flex;
justify-content: space-between;
}
div#main-container .demo {
width: 50%;
margin-right: 7px;
}
div#main-container #droppable {
flex: 1;
border: 1px solid red;
}
#dragSet {
position: relative;
}
#dragHandle {
position: absolute;
top: 4px;
right: 12px;
background-color: red;
color: white;
padding: 6px;
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="main-container">
<div class="demo">
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
</div>
<div id="droppable">
</div>
</div>
推荐阅读
- javascript - 在fulleditmode/designmode中,如何引用当前选中的使用 Javascript/JQuery?
- r - 无法在 finalfit.coxph 结果中显示变量标签
- svg-filters - SVG alpha 过滤器改变像素颜色
- asp.net - .net core api端点未在发布请求上绑定复杂数据
- c++ - 使用一个变量导航多维数组
- angular - CORS 策略“访问控制允许来源”IIS
- python - 从 Python 传递字符串时 PyArg_ParseTuple 出现分段错误
- react-native - 单击文本输入后如何禁用表单向上滚动
- while-loop - 在 Julia 中循环更新数组,避免使用全局变量
- javascript - 将对象(数组?)转换为字符串