English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
El proyecto requiere, se debe implementar una operación de arrastrar y soltar, que permita arrastrar múltiples elementos seleccionados cada vez, y después de soltarlos en el contenedor de destino, se puede ordenar. Después de considerar, creo que jQuery-Es adecuado para la interfaz de usuario, después de todo, proporciona el mecanismo de eventos de interacción que necesita el proyecto. Arrastrar y soltar, ordenar, seleccionar y otros efectos. En la operación real, he encontrado muchos problemas, mencionaré, y finalmente adjuntaré una imagen y el código.
1.El framework de bootstrap que estoy usando, he introducido jQuery-Después de añadir el método de arrastrar y soltar al elemento, se muestra un mensaje de que ese método no es una función. Buscando la causa, es que bootstrap y jQuery-El identificador de control del $ de uide entra en conflicto. Después de introducir jQuery-Añade la siguiente语句 al js de la interfaz de usuario
<script> jQuery.noConflict(); </script>
2.jquery-La interfaz de usuario proporciona operaciones de selección (opción única, selección múltiple), donde la selección múltiple puede realizarse pulsando Ctrl y haciendo clic múltiple con el ratón, o arrastrando múltiples elementos con el ratón para seleccionar. Cuando se añaden operaciones de selección y arrastrar y soltar al mismo elemento, se produce un problema.
a: La operación de selección múltiple, debido a que se puede arrastrar y soltar en los elementos, tiene conflictos con el evento de arrastrar y soltar propio (creo que el efecto de selección múltiple arrastrando y soltando con el clic del ratón no es tan útil como usar Shift con el clic del ratón).
b: jQuery-No he encontrado en la interfaz de usuario la capacidad de arrastrar y soltar múltiples elementos individuales simultáneamente.
No sé si es porque soy torpe y no he descubierto jQuery-La interfaz de usuario puede usar métodos y atributos propios, que pueden soportar la selección múltiple y la operación de arrastrar y soltar para seleccionar elementos. Si algún lector sabe, por favor avísame.3¡Q!
En resumen, he probado varios jQuery-Atributos y eventos de la interfaz de usuario, he intentado usar jQuery-Operación de selección arrastrar y soltar de la interfaz de usuario, no he encontrado el efecto que necesito. Por lo tanto, después de considerar, decidí no usar jQuery-operaciones de selección de la interfaz de usuario. Escribe una operación de selección por tu cuenta. Al igual que el mecanismo de desencadenamiento de eventos que usamos comúnmente. (Clic del ratón para opción única, Ctrl+Selección múltiple del ratón, Shift+鼠标多选），然后配合jquery-ui的drag和drop和sort事件机制实现拖拽排序效果。
再插一嘴，拖拽多个元素的效果，实际上是拖拽一个指定的dom元素，可以将需要拖拽的所有节点都放置到该元素中。这个需要配合jquery-ui的drag中的helper函数，返回一个新的拖拽元素集合。（关于jquery-ui的一些事件和属性大家可从网上查阅。不过说得也不尽详细，还需要自己去实验）。
Okay，贴出简单的效果图和代码
图一（拖放中效果）
图二（释放后效果）
效果图如上，左侧橙色为选中的节点，红色椭圆内部为鼠标拖拽的效果，3表示选中的元素个数；右侧的黄色区域表示可以释放和排序的容器。在该区域拖放时，节点会根据鼠标的位置自动排序，如图，如果释放鼠标后，左侧的3个节点就会移动到4.对应的黄色区域。
当然，以上的效果需要去重新给拖拽目标赋予新的元素，并且监听拖拽，释放等时间，编写用户自定义的逻辑。贴出自己的代码，一些事件和属性可以查阅jquery-ui的文档。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-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(); //解决jQuery控制权冲突问题
</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{ lista-style-type: none; margin: 0; padding: 0; width: 80%; }
.selectable li{
lista-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(){
//Método de selección múltiple personalizado
var selected_begin_index,selected_end_index;
$("#mydrag").on("mousedown",".selectable>li",function(e){
var _selectable= $(this).parent();
if(!e.ctrlKey && !e.shiftKey){ //No se ha presionado la tecla Ctrl o Shift
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){ //Solamente presionar la tecla Ctrl
$(this).addClass("ui-selected");
selected_begin_index=_selectable.children("li").index(this);
}else if((!e.ctrlKey && e.shiftKey) || (e.ctrlKey && e.shiftKey)){ //Solamente presionar la tecla Shift o ambas teclas Shift y Ctrl
_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 se ha presionado la tecla Ctrl o Shift
_selectable.children("li").removeClass("ui-selected");
$(this).addClass("ui-selected");
}
});
//Llamar al evento de arrastrar y replanificar la forma de manejo
$("#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 ) {
//Este contenido se ejecutará dos veces si se arrastra y se suelta en el panel de ordenamiento, coloque este contenido en el método stop de ordenamiento
}
});
//Después de que se complete el orden, realice la operación de liberación real
$("#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-resaltar ui-sortable-handle").text($("#mydrag .selectable>li").eq(selected_li_arr[i]).text()));
//Para este elemento, coloque la etiqueta de carga
$("#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>
El código es utilizable (no se ha escrito el efecto de liberación de opción única, el ejemplo es un producto de prueba actual, que aún debe cambiarse al modo de complemento). Registraré mis reflexiones de estos dos días. Principalmente, se ha gastado una cierta cantidad de energía en buscar el mecanismo de eventos, organizar la idea y resolver problemas de conflicto, por lo que debo anotarlo.
Esto es todo el contenido de este artículo, espero que ayude a su aprendizaje y que todos los apoyen a la enseñanza de grito.
Declaración: El contenido de este artículo se ha obtenido de la red, pertenece al autor original, el contenido se ha contribuido y subido por los usuarios de Internet de manera autónoma. Este sitio no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @ para denunciar y proporcione evidencia. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.)