6

私は次のHTMLを持っています:

<div class="list" id="list">
    <div class="item" id="i1">Item 1</div>
    <div class="item" id="i2">Item 2</div>
    <div class="item" id="i3">Item 3</div>
</div>
<div class="timeline" id="timeline">
</div>

jQueryでできるようにしたいのは、次のとおりです。

  1. .itemからに#listをドラッグできる#timeline
  2. .items は、必要に応じて何度でもタイムラインにドロップできます。#i1タイムラインには4 つのアイテムが存在する可能性があります。
  3. .itemタイムライン内の は互いにオーバーラップしてはなりません
  4. .itemは、タイムライン上の他のアイテムと重ならない限り、タイムラインに沿って任意の場所に配置できます

だから私は jQueryUI の Draggable と Droppable を選び、jQueryUI Draggable Collision Pluginも使いました。

これが私が始めたjQueryです：

$('#list .item').draggable({
    helper: 'clone',
    revert: 'invalid',
    //the following are for the jquery-ui-dragggable-collision plugin
    obstacle: '#timeline .item',
    preventCollision: true
});
$('#timeline').droppable({
    accept: '.item'
});

私の問題は、jQueryUI Draggable Collision Plugin は、元の Div 自体をドラッグしていて、ヘルパーをドラッグしていない場合にのみ機能することです。＃2（1つのアイテムの複数のコピーを追加）を達成できるようにヘルパーが必要です。しかし、#3 (項目が重なっていない) を達成できるように、Collision Plugin のようなものが必要です。

この問題の解決策を知っている人はいますか? ドラッグ可能なオブジェクトのヘルパーで衝突検出を行う別のプラグインはありますか? 達成したいことを達成するために試みることができる別のアプローチはありますか?

4

2 に答える 2

3

提案したように、jQueryUI Draggable Collision Pluginを使用するjsfiddleを好む場合は、次のことを試してみてください。jsfiddleへのリンク

このアプローチでは、衝突機能を利用するために元のヘルパーを使用します。クローンはstartevent関数で生成されます（ドラッグしてもドロップが成功しなかった場合は、stopイベントで再び削除されます）。

$(function(){
    var draggableSelector = ".list .item:not(.dropped)";
    var init = function() {  
        $(draggableSelector).each(function(i){
            $(this)
                .draggable({
                    //helper: 'clone',
                    revert: 'invalid',
                    start: function(event,ui) {
                        var $clone = ui.helper.clone();
                        $clone
                            .removeClass("ui-draggable ui-draggable-dragging")
                            .insertAfter(ui.helper)
                        ;
                        $(this).data("clone",$clone);
                    },
                    stop: function(event,ui) {
                        if( $(".ui-draggable-dragging.dropped").length == 0) {
                            $(this).data("clone").remove();
                        };
                    },
                    //the following are for the jquery-ui-draggable-collision plugin
                    refreshPositions: true,
                    obstacle: '.item.dropped',
                    preventCollision: true,
                })
                .css("left", ( ($(this).width() + 5) * i) + "px")
            ;
        });

        $('.timeline').droppable({
            accept: '.item'
            ,drop: function(event,ui) {
                ui.draggable
                    .addClass("dropped")
                ;
                setTimeout(reinit, 500);
            }
        });                
    };

    var reinit = function() {
        $(".list .item.ui-draggable").draggable("destroy");
        init();
    }

    init();
});

これがお役に立てば幸いです。

于 2013-02-15T13:49:24.100 に答える
1

これは、衝突検出を備えた単純なドラッグ アンド ドロップ プラグインを示す、この質問に対して私が書いた例です。アイテムが重複せずに存在するスペースがある限り、アイテムをタイムラインにドロップできます。

これは決して完成品ではありませんが、このようなコードを書くのはそれほど複雑ではなく、競合する大規模なプラグインを一緒にハックしようとすることが常に最善の選択肢ではないことを示してくれることを願っています. ゼロから始めるのが最善の場合もあります。楽しくて、本当に良い学習方法です。

/*----------ON DOCUMENT READY----------*/

$(document).ready(function() {

  $("#timeline").timeline({
    items: ".item"
  });

});

/*----------THE TIMELINE PLUGIN----------*/

$.fn.timeline = function(options) {

  var defaults = {
    items: "div"
  }

  var options = $.extend(defaults, options)

  return this.each(function() {

    //-----SETUP-----//

    //define all the vars we will need later
    var el = $(this);
    var items = $(options.items);
    var mousedown = false;
    var dragging = false;
    var activeItem = false;
    var placedItems = new Array();

    //make everything unselectable so it dosne interfere with dragging
    $("html").find("*").css({
      "user-select": "none",
      "-moz-user-select": "none",
      "-webkit-user-select": "none",
      "-ms-user-select": "none",
      "-o-user-select": "none",
    }).attr("unselectable", "true").unbind("onselectstart");

    //-----EVENTS-----//

    //log when the mouse is down anywhere on the doc
    $(document).mousedown(function() {
      mousedown = true;
    });

    //when the mouse is released
    $(document).mouseup(function(e) {
      //if was dragging an item attempt to place it
      if (mousedown && dragging) {
        placeItem(e);
      }
      //log that dragging has stopped
      mousedown = false;
      dragging = false;
    });

    //log when the mouse is pressed over an item
    items.mousedown(function() {
      dragging = true;
      //clone the active item and hide it ready for dragging
      activeItem = $(this).clone().appendTo("body").hide();
    });

    //when the mouse movers over the doc
    $(document).mousemove(function(e) {
      //if mouse was pressed over item attempt to drag
      if (mousedown && dragging) {
        dragItem(e);
      }
    });

    //-----FUNCTIONS-----//

    //drag the item around the screen
    function dragItem(e) {

      //if no active item done do owt
      if (!activeItem) {
        return false;
      }

      //work out where the drag anchor is
      var x = e.pageX - (activeItem.height() / 2);
      var y = e.pageY - (activeItem.width() / 2);

      //save the original position in case we cant place the item
      if (!activeItem.origPos) {
        activeItem.origPos = {
          x: x,
          y: y
        }
      }

      //drag the item
      activeItem.css({
        "position": "absolute",
        "top": y,
        "left": x,
        "z-index": "999",
        "opacity": 0.6,
        "display": "block"
      });

    }

    //attempt to place the item
    function placeItem(e) {

      //if no active item dont do owt
      if (!activeItem) {
        return false;
      }

      //define som vars needed later on
      var onTargetY = false;
      var onTargetX = false;
      var remove = false;
      var collision = false;

      //check if item is being relesed withing the timeline bounds
      if (e.pageY > el.position().top && e.pageY < el.position().top + el.height()) {
        onTargetY = true;
      }
      if (e.pageX > el.position().left && e.pageX < el.position().left + el.width()) {
        onTargetX = true;
      }

      //if on target attempt to drop on timeline
      if (onTargetX && onTargetY) {

        //snap to the left or right if dropped at the left or right edges
        var maxLeft = el.position().left;
        var maxRight = el.position().left + el.width() - activeItem.width();
        x = e.pageX - (activeItem.width() / 2);
        if (x < maxLeft) {
          x = maxLeft;
        } else if (x > maxRight) {
          x = maxRight;
        }

        //loop the items already on the timeline and check for collisions
        $.each(placedItems, function(i, item) {
          var itemMin = item.position().left;
          var itemMax = item.position().left + item.width();
          if (x + activeItem.width() > itemMin && x < itemMax) {
            collision = true;
          }
        });
        y = el.position().top;

      }

      //if there is a collision or the item is dropped outside the timeline 
      //set x and y back to original position and set removal flag to true
      if (collision || !onTargetX || !onTargetY) {
        x = activeItem.origPos.x;
        y = activeItem.origPos.y;
        remove = true;
        //if dropped inside the timeline and no collisions add item to the 
        //array of items inside the timeline
      } else {
        placedItems.push(activeItem);
      }

      //finally either animate the item back to where it started then remove it
      //or snap it into the timeline in the space found
      activeItem.animate({
        top: y,
        left: x
      }, {
        duration: 300,
        queue: false,
        complete: function() {

          //if remove flag set remove the item from the dom
          if (remove) {
            $(this).remove();
          }

          //some tidying up
          activeItem.css("opacity", 1);
          activeItem = false;

        }
      });

    }

  });

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list" id="list">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
</div>

<div class="timeline" id="timeline"></div>

楽しみ ：）。

于 2013-02-15T09:37:23.253 に答える