English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
プロジェクトが必要とするため、ドラッグ＆ドロップ操作を実現する必要がありました。それぞれの選択された要素をドラッグして、ターゲットコンテナーにリリースし、ソートできるようにする必要がありました。少し考えてみて、jQuery-UIが最適です。なぜなら、プロジェクトが必要とするインタラクションイベントメカニズムを提供しているからです。ドラッグ、リリース、ソート、選択などの効果があります。実際の操作では多くの問題に直面しました。それについて説明し、最後に画像とコードを添付します。
1.私が使用しているbootstrapフレームワーク、jQueryをインポート-UIに、要素にドラッグメソッドを追加した後、そのメソッドが関数でないというエラーメッセージが表示されます。原因を調べると、bootstrapとjQuery-UIdeの$シンボルが権限競合しています。jQueryをインポートした後-UIのJavaScriptに以下の文を追加して解決します
<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のhelper関数は、新しいドラッグエレメントセットを返します。（jQueryの-uiのイベントや属性はオンラインで調べることができますが、詳細は提供されていません。自分で実験する必要があります。
いいえ、簡単な效果图とコードを貼り付けてください。
図一（ドラッグ中の効果）
図二（リリース後の効果）
の效果图は上記の通り、左側のオレンジ色が選択されたノード、赤い円内部がドラッグの効果を示します。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{ 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(){
//カスタムマルチセレクションメソッド
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#oldtoolbag.com（メールを送信する際には、#を@に置き換えてください。侵害を報告する場合は、関連する証拠を提供し、確認が取れた場合、このサイトは即座に侵害を疑う内容を削除します。）