8

一度に複数のアイテムをドラッグするために作成した jQuery コードを次に示します。現在はドラッグ可能ですが、ドロップはできません。

ここにコードがあります 

    $(document).on('click', function (e) {
        var target = e.target;
        if (!$(target).hasClass('a')) $('.selected').removeClass('selected');
    });
    $(document).delegate('.a', 'dblclick', function (e) {
        $(this).addClass('selected');
    });

    $(document).delegate('.selected', 'mousedown', function (e) {
        var div = $('<div></div>');
        $('.selected').each(function () {
            div.append($(this).clone());
        });
        div.prop('id', 'currentDrag');
        $('#currentDrag').css({
            left: e.pageX + "px",
            top: e.pageY + "px"
        });
        $('body').append(div);
    });

    $(document).on('mouseup', function (e) {
        var tgt = e.target;
        var mPos = {
            x: e.pageX,
            y: e.pageY
        };
        $('.drop').each(function () {
            var pos = $(this).offset(),
                twt = $(this).width(),
                tht = $(this).height();
        });
        if((mPos.x > pos.left) && (mPos.x < (pos.left + twt)) && (mPos.y > targPos.top) && (mPos.y < (pos.top + tht))) {
            $(this).append($('#currentDrag').html());
        }
        $('.drop .selected').removeClass('selected');
        $('#currentDrag').remove();
    });
    $('.drop').on('mouseup', function (e) {
        $(tgt).append($('#currentDrag').html());
        $('.drop .selected').removeClass('selected');
        $('#currentDrag').remove();
    });

    $(document).on('mousemove', function (e) {
        $('#currentDrag').css({
            left: e.pageX + "px",
            top: e.pageY + "px"
        });
    });

私のコードの問題は何ですか?どうすればこれを達成できますか? ここにフィドルがありますhttp://jsfiddle.net/mDewr/27/

4

3 に答える 3

2

draggablejQuery UIとdroppableライブラリを機能させる方法を見つけることをお勧めします。次に、次のような質問になります: JavaScript または jQuery で複数の要素をドラッグするにはどうすればよいですか? .

その質問の答えの 1 つをあなたの問題に適用する方法を次に示します。jQuery UI multiple draggable pluginを使用しています。そのスクリプト全体はjquery.ui.multidraggable-1.8.8.js にあります。

まず、HTML を単純化しましょう。ドラッグおよびドロップ可能な div を要素内に配置することで、各要素に冗長なスタイルを適用する必要がなくなります。代わりに、包含要素を使用してスタイルを設定できます

HTML

<div id="parent">
    <div id="dragTargets">
        <div>123</div>
        <div>456</div>
        <div>789</div>
    </div>
    <div id='dropTargets'>
        <div></div>
        <div></div>
    </div>
</div>

プラグインを使用して、multidraggable各ドラッグ div で呼び出すことができます。そしてdroppableどこにでも落とせる

JavaScript

$("#dragTargets div").multidraggable();
$("#dropTargets div").droppable();

カスタマイズ

スタイリングで見た目をコントロールできます。例として、drops を受け取ることができるもの、yellowとしてドロップしようredとしているもの、および element を受け取ったものを作成しますgreen。

CSSの例としてのスタイリングを次に示します。

.ui-state-highlight { background: green; }
.ui-state-active { background: yellow; }
.ui-state-hover { background: red; }

そして、これらのクラスがJavaScriptでいつ適用されるかを制御します:

$("#dropTargets div").droppable({
    activeClass: "ui-state-active",
    hoverClass: "ui-state-hover",
    drop: function () {
        $(this).addClass("ui-state-highlight")
    }
});

マルチドラッグ可能

現在選択されている要素のスタイルを設定する必要があります。スクリプトはui-multidraggable、現在選択されているすべての要素にクラスを適用します。次の CSS は、選択したものが選択されていることをユーザーに明らかにします。

.ui-multidraggable {
    background: tan;
}

このデモをご覧ください。Ctrl キーを押しながら複数の div を選択し、一度にすべてをドラッグします。

jsフィドル

于 2013-09-23T17:18:44.300 に答える
1

いくつかのエラーがありましたが、ここではリストしませんが、古いバージョンと新しいバージョンを比較できます。

    $(document).on('dblclick', '.a', function (e) {
      $(this).toggleClass('selected');
    });

    $(document).on('mousedown', '.selected', function (e) {
      var div = $('<div id="currentDrag"></div>');
      $('.selected').each(function () {
          div.append($(this).clone(true));
      });
      var p = $('body').offset();
      var l = e.pageX - p.left;
      var t = e.pageY - p.top;
      console.log(l, ', ', t);
      $('body').append(div);
      $('#currentDrag').css({
          left: l,
          top: t
      });

    });

    $(document).on('mouseup', '.selected', function (e) {
      $('.d').each(function(index, item){
          var $i = $(item);
          if (e.pageX >= $i.offset().left &&
              e.pageX <= $i.offset().left + $i.width() &&
              e.pageY >= $i.offset().top &&
              e.pageY <= $i.offset().top + $i.height()) {       
              console.log('Dropped');
              var $cl = $('#currentDrag').find('>*').clone(true);
              $i.append($cl);
          }
      });
      $('.selected').removeClass('selected');          
      $('#currentDrag').remove();
    });

    $(document).on('mousemove', function (e) {    
      var p = $('body').offset();
      $('#currentDrag').css({
          left: e.pageX - p.left,
          top: e.pageY - p.top
      });          
    });

http://jsfiddle.net/mDewr/43/

このバージョンでは、すべてが完全に機能するはずです (これは更新です)。PS: 1.7+ jQuery に変更しましたが、1.7 未満に簡単に戻すことができます。また、カスタム属性は必要ありません。代わりに css クラスを使用してください。

于 2013-09-14T07:39:03.653 に答える