easyui ドロップ可能コンポーネントは配置効果を実装します-jsチュートリアル-php.cn

easyui ドロップ可能コンポーネントは配置効果を実装します

PHPz

リリース： 2018-09-29 11:05:08

転載

1245 人が閲覧しました

ドロップ可能とドラッグ可能は似ていますが、前者は要素をコンテナに配置することに焦点を当てているのに対し、後者はドラッグ可能であることに焦点を当てているという点が異なります (ただし、一部の効果は両方によって達成される場合があります)。 easyloader のソースコードを見ると、droppable が draggable に依存していないことがわかります。

いわゆる配置とは、オブジェクトをオブジェクトに配置することであり、同時に、このコンポーネントは他のコンポーネントに依存することなく、さまざまな効果をトリガーすることが重要です。

ドロップ可能なロードメソッド

1、クラスロード私はロードのクラスメソッドが好きではありませんでした。コードが多すぎると、位置が無駄になり、見た目が乱雑になります。

コードは次のとおりです:

<p id=&#39;dd&#39; class="easyui-droppable" data-options="accept:&#39;#box,#pox&#39;"></p>

ログイン後にコピー

2,js 読み込み呼び出し

$("#box").droppable({
  accept:&#39;#pox&#39;,     //将元素pox 放置在元素box中
});

ログイン後にコピー

ドロップ可能な属性

1 ,accept

デフォルトは null、どの要素が受け入れられるか、つまりどの要素を配置できるかを決定します

$("#box").droppable({
  accept:&#39;#pox&#39;,     //将元素pox 放置在元素box中
});

ログイン後にコピー

2、無効化

デフォルトは false true の場合、禁止されています Drop

$("#box").droppable({
  accept:&#39;#pox&#39;,     //将元素pox 放置在元素box中
  disabled : true ,    //禁止放置
});

ログイン後にコピー

ドロップ可能なイベントリスト

1,要素がドロップエリアにドラッグされるとonDragEnterがトリガーされます

2, onDragOver は、ドラッグされた要素が配置領域を通過するときにトリガーされます

3. onDragLeave ドラッグされた要素が配置領域から離れるときにトリガーされます

4. onDrop ドラッグされた要素が配置領域に配置されるときにトリガーされますトリガーされると

onDragEnter /onDragOver/onDragLeave/onDrop: function (e,source){
   //source 参数获取DOM元素
 }

ログイン後にコピー

ドロップ可能なメソッドリスト

1、オプションは属性オブジェクト

console.log($(&#39;#box&#39;).droppable(&#39;options&#39;));

ログイン後にコピー

2、enable、disable、および上記の属性を返します。機能は同じで、配置の有効化と無効化です

$(&#39;#box&#39;).droppable(&#39;enable/disable&#39;)

ログイン後にコピー

公式の例を示します

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Accept a Drop - jQuery EasyUI Demo</title>
 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/metro/easyui.css">
 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css">
 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/demo/demo.css">
 <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script>
 <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
</head>
<body>
 <div style="margin:20px 0;"></div>
 <div id="source" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;">
  drag me!
  <div id="d1" class="drag">Drag 1</div>
  <div id="d2" class="drag">Drag 2</div>
  <div id="d3" class="drag">Drag 3</div>
 </div> 
 <div id="target" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;">
  drop here!
 </div>
 <div style="clear:both"></div>
 <style type="text/css">
  .drag{
   width:100px;
   height:50px;
   padding:10px;
   margin:5px;
   border:1px solid #ccc;
   background:#AACCFF;
  }
  .dp{
   opacity:0.5;
   filter:alpha(opacity=50);
  }
  .over{
   background:#FBEC88;
  }
 </style>
 <script>
  /**
  使用js方式将元素设置为可draggable的
  */
  $(function(){
   $(&#39;.drag&#39;).draggable({
    proxy:&#39;clone&#39;,
    revert:true,
    cursor:&#39;pointer&#39;,
    onStartDrag:function(){
     $(this).draggable(&#39;options&#39;).cursor=&#39;not-allowed&#39;;//设置鼠标样式为不可拖动
     $(this).draggable(&#39;proxy&#39;).addClass(&#39;dp&#39;);//设置样式
    },
    onStopDrag:function(){
     $(this).draggable(&#39;options&#39;).cursor=&#39;auto&#39;;//设置鼠标
    }
   });
   //将容易置为droppable并且可接受元素
   $(&#39;#target&#39;).droppable({
    accept:&#39;#d1,#d3&#39;,
    onDragEnter:function(e,source){//拖入
     $(source).draggable(&#39;options&#39;).cursor=&#39;auto&#39;;
     $(source).draggable(&#39;proxy&#39;).css(&#39;border&#39;,&#39;1px solid red&#39;);
     $(this).addClass(&#39;over&#39;);
    },
    onDragLeave:function(e,source){//脱离
     $(source).draggable(&#39;options&#39;).cursor=&#39;not-allowed&#39;;
     $(source).draggable(&#39;proxy&#39;).css(&#39;border&#39;,&#39;1px solid #ccc&#39;);
     $(this).removeClass(&#39;over&#39;);
    },
    onDrop:function(e,source){//放下
     $(this).append(source)
     $(this).removeClass(&#39;over&#39;);
     alert("我被放下了");
    } ,
    //onDropOver当元素被拖出(成功放入到某个容器)的时候触发
    onDragOver:function(e,source){
      alert("我被拖出去了");//先于alert("我被放下了");执行,表明其触发在onDrop之前。
   }
   });
  });
 </script>
  
</body>
</html>

ログイン後にコピー

操作レンダリングはここでは示されていません。公式 Web サイトで確認できます。直接使用する場合はチェックを入れてください。 OVER!

エフェクトアドレス: http://www.jeasyui.com/demo/main/index.php?plugin=Droppable&theme=default&dir=ltr&pitem=

上この章の内容は以上です。その他の関連チュートリアルについては、jQuery ビデオチュートリアル、jQuery EasyUI ビデオチュートリアルをご覧ください。