English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
The project needs to implement a drag and drop operation, which requires that multiple selected elements can be dragged each time, and can be sorted after releasing into the target container. After some consideration, I think jQuery-UI is more suitable, as it provides the interactive event mechanism needed for the project. Drag, drop, sort, selection, and other effects. In actual operations, many problems were encountered, which are explained below, and the effect diagram and code are attached at the end.
1.The Bootstrap framework I use, introduce jQuery-UI, after adding the drag method to the element, it prompts that the method is not a function. After searching for the cause, it is found that Bootstrap and jQuery-The $ identifier of uide conflicts with the control. After introducing jQuery-Add the following statement before the jQuery in the UI's js
<script> jQuery.noConflict(); </script>
2.jquery-UI provides selection operations (single selection, multiple selection), among which multiple selection can be selected by holding Ctrl and clicking multiple elements with the mouse, or by dragging multiple elements with the mouse for multiple selection. When adding selection operations and drag operations to the same element, problems arise.
a: The multiple selection operation conflicts with the drag event of the element itself (I personally think that the effect of mouse drag and drop multiple selection is not as good as using Shift in combination with mouse click).
b: jQuery-UI did not find a way to drag and drop multiple individual elements at the same time.
I don't know if I am too dumb to not find jQuery-UI can use its built-in methods and properties, which can support multiple selection and drag and drop selection operations. If any reader knows, please inform.3Q!
In short, I have tested multiple jQuery-UI attributes and events, have tried to use jQuery-UI drag and drop multiple selection operation deletion, but did not find the effect I needed. So, after some consideration, I decided not to use jQuery-UI selection operations. Write a selection operation yourself. Just like the event trigger mechanism we commonly use. (Single selection with mouse click, Ctrl+Multiple selection with the mouse, Shift+mouse multi-select), and then cooperate with jquery-ui's drag and drop and sort event mechanism to implement drag and drop sorting effect.
To say again, the effect of dragging multiple elements is actually dragging a specified dom element, and all the nodes to be dragged can be placed in this element. This needs to be配合jquery-The helper function in ui's drag, which returns a new set of drag elements. (About jquery-Some events and properties of ui can be found online. However, it is not detailed enough, and you need to experiment by yourself).
Okay, post a simple effect diagram and code
Figure 1 (effect during drag and drop)
Figure 2 (effect after release)
Effect as shown above, the left orange is the selected node, and the red ellipse is the dragging effect of the mouse3represents the number of selected elements; the right yellow area represents the container where elements can be dropped and sorted. When dragging in this area, nodes will automatically sort according to the mouse position, as shown in the figure, if the mouse is released after, the left side of the3nodes will move to4. corresponding yellow area.
Of course, the above effects need to assign new elements to the drag target, and listen to drag, release, and other events, and write user-defined logic. Post your code, some events and properties can be checked in jquery-the documentation of ui.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">-8">
<title></title>
<link rel="stylesheet" href="assets/css/bootstrap.css" />
<link rel="stylesheet" href="js/jquery-ui-1.12.1.dropable/jquery-ui.css" />
<script src="js/jquery-1.11.2.js"></script>
<script src="assets/js/bootstrap.js"/>
<script>
jQuery.noConflict(); //Resolving jQuery conflict control issues
</script>
<script src="js/jquery-ui-1.12.1.dropable/jquery-ui.js"></script>
<style>
.selectable .ui-selecting{ background: #FECA40; }
.selectable .ui-selected{ background: #F39814; color: white; }
.selectable{ list-style-type: none; margin: 0; padding: 0; width: 80%; }
.selectable li{
list-style: none;
margin: 3px; padding: 0.4em; font-size: 1.4em; height: 32px;moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
}
.drag_info_box{
width:40px;
height:40px;
text-align: center;
font-size:14px;
line-height: 40px;
background: #21aeff;
color:#000000;
}
</style>
<script>
$(function(){
//Custom multi-select method
var selected_begin_index,selected_end_index;
$("#mydrag").on("mousedown",".selectable>li",function(e){
var _selectable=$(this).parent();
if(!e.ctrlKey && !e.shiftKey){ //No Ctrl or Shift key is pressed
if(!$(this).hasClass("ui");-selected")){
_selectable.children("li").removeClass("ui-selected");
}
$("this").addClass("ui-selected");
selected_begin_index=_selectable.children("li").index(this);
}else if(e.ctrlKey && !e.shiftKey){ //Only press the Ctrl key
$("this").addClass("ui-selected");
selected_begin_index=_selectable.children("li").index(this);
}else if((!e.ctrlKey && e.shiftKey) || (e.ctrlKey && e.shiftKey)){ //Only press the Shift key or both Ctrl and Shift keys are pressed
_selectable.children("li").removeClass("ui-selected");
$("this").addClass("ui-selected");
if(selected_begin_index!=undefined){
selected_end_index=_selectable.children("li").index(this);
}else{
selected_begin_index=_selectable.children("li").index(this);
}
if(selected_end_index>=selected_begin_index){
for(var i=selected_begin_index;i<=selected_end_index;i++){
_selectable.children("li").eq(i).addClass("ui");-selected");
}
}else{
for(var i=selected_end_index;i<=selected_begin_index;i++){
_selectable.children("li").eq(i).addClass("ui");-selected");
}
}
}
.on("mouseup",".selectable>li",function(e){
var _selectable=$(this).parent();
if(!e.ctrlKey && !e.shiftKey){ //No Ctrl or Shift key is pressed
_selectable.children("li").removeClass("ui-selected");
$("this").addClass("ui-selected");
}
});
//Call the drag event and re-plan the handling method
$("#mydrag .selectable>li").draggable({
revert: "invalid",
containment: "document",
cursor: "default",
distance:10,
zIndex:9,
opacity:0.5,
cursorAt: {
left: 20,
top:40
},
connectToSortable:"#mydrag .sample-group>ol",
helper:function(event,ui){
var drag_info_box=$("<div></div>").addClass("drag_info_box");
drag_info_box.append($("<span></span>"));
drag_info_box.append($('<input type="hidden" />'));
return drag_info_box;
},
start: function( event, ui ) {
var _drag_ele=ui.helper;
_drag_ele.children("span").eq(0).text($("#mydrag .selectable>li.ui-selected").length);
var selected_li_seq="";
$("#mydrag .selectable>li.ui-selected").each(function(){
selected_li_seq+= $("#mydrag .selectable>li").index(this)+",";
});
_drag_ele.children("input").eq(0).val(selected_li_seq.substr(0,selected_li_seq.length)-1));
},
stop:function( event, ui ) {
$(".selectable li").removeClass("ui-selected");
}
});
$("#mydrag .sample-group>ol").droppable({
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
//This content will be executed twice if it is dragged and dropped onto the sorting panel, put this content into the stop method of sorting
}
});
//Execute the actual release operation after sorting is completed
$("#mydrag .sample-group>ol" ).sortable({
revert: true,</
stop: function( event, ui ) {
if(ui.item.hasClass("drag_info_box")){
var selected_li_arr=ui.item.children("input").eq(0).val().split(',');
for(var i=0;i<selected_li_arr.length;i++){
var _group_li_=$("<li></li>")
.addClass("ui-state-highlight ui-sortable-handle").text($("#mydrag .selectable>li").eq(selected_li_arr[i]).text());
//Label this element for upload
$("#mydrag .selectable>li").eq(selected_li_arr[i]).addClass("delete_flag")
$(".drag_info_box").before(_group_li_);
}
}
$("#mydrag .selectable>li.delete_flag").remove();
$(".drag_info_box").remove();
$("this").sortable();
}
}).disableSelection();
});
</script>
</head>
<body>
<div id="mydrag" style="width:1200px;height: auto;">
<div class="col-sm-4" style="background: #eeeeee">
<ol class="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 class="col-sm-4" style="background: greenyellow">
<div class="sample-groups">
<div class="sample-group" style="min-height: 80px;">
<ol
<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>
</ol>
</div>
</div>
</div>
<div class="col-sm-4" style="background: green">
<div class="row">
<div style="background: #ffff00"></div>
<div class="col-sm-5" style="background: blue"></div>
<div class="col-sm-2" style="background: red"></div>
<div class="col-sm-5" style="background: purple"></div>
</div>
</div>
</div>
</body>
</html>
The code is available (the release effect of the single selection is not written, the example is currently a trial product, and it will be changed to a plugin method later). Record the insights of the past two days. Mainly, it takes a lot of effort to find the event mechanism, organize the thoughts, and deal with conflict issues, which should be noted.
That's all for this article. I hope it will be helpful to everyone's learning and also hope everyone will support the Yelling Tutorial more.
Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting. Provide relevant evidence, and once verified, this site will immediately delete the infringing content.)