English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
프로젝트가 필요로 하는 드래그 앤 드롭 작업을 구현해야 합니다. 여러 개의 선택된 요소를 항상 드래그 앤 드롭할 수 있으며, 목표 컨테이너에 떨어뜨렸을 때 정렬할 수 있습니다. 고려한 후, jQuery-UI는 프로젝트가 필요로 하는 인터랙티브 이벤트 메커니즘을 제공하기 때문에 적합합니다. 드래그 앤 드롭, 떨어뜨리기, 정렬, 선택 등의 효과가 있습니다. 실제 작업에서 많은 문제를 겪었으며, 이를 설명하고, 마지막에 이미지와 코드를 추가하겠습니다.
1. 저는 사용하는 bootstrap 프레임워크에서 jQuery를 포함했습니다.-UI를 포함하면, 요소에 드래그 앤 드롭 메서드를 추가한 후, 이 메서드가 함수가 아님을 알리는 경고가 발생합니다. 원인을 찾아보니, bootstrap와 jQuery-uide의 $ 식별자가 제어권 충돌을 일으킵니다. jQuery를 포함한-UI의 JS 앞에 다음 문장을 추가하여 해결할 수 있습니다
<script> jQuery.noConflict(); </script>
2.jquery-UI에서 선택 작업(단일 선택, 다중 선택)을 제공하며, 다중 선택은 Ctrl을 누른 상태에서 마우스 클릭을 통해 선택할 수 있으며, 여러 요소에서 마우스를 드래그하여 선택할 수도 있습니다. 동일한 요소에 선택 작업과 드래그 앤 드롭 작업을 추가할 때 문제가 발생했습니다.
a: 다중 선택의 작업은 요소에서 드래그 앤 드롭할 수 있어 본인의 드래그 앤 드롭 이벤트와 충돌합니다(개인적으로는 마우스 드래그 다중 선택의 효과가 Shift와 함께 마우스 클릭보다 편리하지 않다고 생각합니다).
b: jQuery-UI에서 여러 개의 단일 요소를 동시에 드래그 앤 드롭할 수 있는 것을 발견하지 못했습니다.
혹시나 저가 멍청해서 jQuery를 발견하지 못했는지 모릅니다.-UI는 자체적으로 제공하는 메서드와 속성을 사용할 수 있으며, 이를 통해 다중 선택과 드래그 앤 드롭 선택된 요소 작업을 지원할 수 있습니다. 누가 알고 있다면 알려주세요.3Q！
결론적으로, 여러 가지 jQuery를 시험했습니다.-UI의 속성과 이벤트, jQuery를 시도해 보았습니다.-UI의 드래그 앤 드롭 다중 선택 작업 제거도 원하는 효과를 발견하지 못했습니다. 따라서, 고려한 후, jQuery를 사용하지 않기로 결정했습니다.-UI의 선택 작업. 자신이 작성한 선택 작업. 일반적으로 사용하는 이벤트 트리거 메커니즘과 같습니다. (마우스 클릭 단일 선택, Ctrl+마우스 다중 선택, Shift+마우스 다중 선택), 그리고 jquery와 함께 사용합니다-ui의 drag, drop, sort 이벤트 메커니즘을 사용하여 드래그 정렬 효과를 구현합니다.
다시 말씀드리지만, 여러 요소를 드래그하는 효과는 특정 dom 요소를 드래그하는 것과 같습니다. 필요한 모든 노드를 이 요소에 넣을 수 있습니다. 이는 jquery와 함께 사용해야 합니다-ui의 drag 함수는 새로운 드래그 요소 집합을 반환합니다. (jquery에 대해)-ui의 이벤트와 속성은 인터넷에서 확인할 수 있습니다. 하지만 설명은 그리 자세하지 않으며, 직접 실험해야 합니다).
예, 간단한 그림과 코드를 붙여넣습니다
그림 1(드래그 중 효과)
그림 2(드래그 후 효과)
그림과 같이, 왼쪽 주황색이 선택된 노드이고, 빨간 원 안이 마우스 드래그 효과를 나타냅니다.3선택된 요소의 개수를 나타냅니다; 오른쪽의 노란 부분은 드래그와 드롭, 정렬이 가능한 컨테이너를 나타냅니다. 이 부분에서 드래그를 할 때, 노드는 마우스 위치에 따라 자동으로 정렬됩니다. 그림처럼 마우스를 떼면, 왼쪽의3개의 노드가 이동됩니다4.의 노란 부분.
물론, 위의 효과는 새로운 요소를 부여하고 휴지, 드래그 등의 시간을 감지하여 사용자 정의 로직을 작성해야 합니다. 코드를 붙여넣고, 일부 이벤트와 속성은 jquery에서 참조할 수 있습니다.-ui 문서.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<제목></제목>
<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{ 리스트-style-type: none; margin: 0; padding: 0; width: 80%; }
.selectable li{
리스트-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(){
//사용자 정의 다중 선택 메서드
var selected_begin_index,selected_end_index;
$("#mydrag").on("mousedown",".selectable>li",function(e){
var _selectable=$(this).parent();
if(!e.ctrlKey && !e.shiftKey){ //没有按下Ctrl或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){ //단축키 Ctrl만 누른 경우
$("this").addClass("ui-selected");
selected_begin_index=_selectable.children("li").index(this);
}else if((!e.ctrlKey && e.shiftKey) || (e.ctrlKey && e.shiftKey)){ //단축키 Shift만 누르거나 Ctrl과 Shift를 모두 누른 경우
_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){ //没有按下Ctrl或Shift键
_selectable.children("li").removeClass("ui-selected");
$("this").addClass("ui-selected");
}
});
//调用拖拽事件并重新规划处理方式
$("#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 ) {
//이 부분이 정렬 패널에 드래그 앤 드롭된다면 두 번 실행됩니다. 이 내용을 정렬의 stop 메서드에 넣으십시오
}
});
//정렬이 완료되면 실제로는 해제 작업을 수행하십시오
$("#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()));
//이 요소에 업로드 태그를 부여하십시오
$("#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>
코드는 사용 가능합니다（단일 선택의 해제 효과를 작성하지 않았으며, 예시는 현재의 시험 품이며, 이후 플러그인 방식으로 변경될 예정입니다）。이 두일간의 경험을 기록해 둡니다. 주로 이벤트 메커니즘을 찾고, 사고를 정리하고 충돌 문제를 해결하는 데 많은 노력을 기울였습니다. 기억해 두어야 합니다.
이것이 본문의 전체 내용입니다. 많은 도움이 되길 바랍니다. 또한, 나리아 가이드를 많이 지지해 주시기 바랍니다.
고지사항: 본문 내용은 인터넷에서 가져왔으며, 저작권자는 모두입니다. 내용은 인터넷 사용자가 자발적으로 기여하고 업로드한 것이며, 이 웹사이트는 소유권을 가지지 않으며, 인공적인 편집을하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 침해가 의심되는 내용이 있다면, notice#w로 이메일을 보내 주세요.3codebox.com（메일을 보내는 경우 #을 @으로 변경하십시오. 신고를 하시고 관련 증거를 제공하시면, 실제로 확인되면 해당 사이트는 즉시 저작권 침해 내용을 삭제합니다.