Question

我希望能够使用jQuery的draggable函数将对象移动到另一个对象中。我可以移动容器中的对象并能够移动它。但是当我尝试向要移动的对象添加帮助时，这不再起作用。我希望当我选择一个项目将其存放在我的容器中时，它会复制自己。以下是我目前设法做的事情：

JSFiddle

$(".drag").draggable({
    opacity: 0.7,
    snap: '#drop',
    cursor: "move",
    revert: "invalid",
    //helper: "clone"
});

$("#drop").droppable({
    drop: function(event, ui) {

    }
});

<div class="drag">
    <p>Exemple bloc</p>
</div>
<div class="drag">
    <p>Exemple bloc</p>
</div>


<div id="drop">
   <p>Drop here</p>
</div>

我存放在.drop克隆中的元素必须能够在容器中移动.drop

Answer 1

这可以帮助你working demo

HTML

<div id="wrapper">
    <div id="origin" class="fbox">
        <img src="http://placehold.it/140x100" id="one" title="one" class="draggable" />
        <img src="http://placehold.it/150x100" id="two" title="two" class="draggable" />
        <img src="http://placehold.it/160x100" id="three" title="three" />
    </div>
    <p>CONTAINAIR</p>
    <div id="drop" class="fbox">

    </div>
</div>

<强> JAVASCRIPT

    $(".draggable").draggable({ cursor: "crosshair", revert: "invalid"});

$("#drop").droppable({ accept: ".draggable",

  drop: function(event, ui) {

    console.log("drop");

    $(this).removeClass("border").removeClass("over");

    var dropped = ui.draggable;
    var droppedOn = $(this);

    $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
  },

  over: function(event, elem) {

    $(this).addClass("over");

    console.log("over");

  },

  out: function(event, elem) {

    $(this).removeClass("over");

  }

});

$("#drop").sortable();

$("#origin").droppable({ accept: ".draggable", drop: function(event, ui) {

  console.log("drop");

  $(this).removeClass("border").removeClass("over");

  var dropped = ui.draggable;
  var droppedOn = $(this);

  $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);

}});

CSS

#origin
{
  background-color: lightgreen;
}

#origin img, #drop img {
  margin-top: 3px;
  margin-left: 5px;
}

#drop
{
  background-color: red;
  min-height: 120px;
}
.over {
  border: solid 5px purple;
}
.draggable
{
  border: solid 2px gray;
}

Answer 2

我编辑了你的小提琴： http://jsfiddle.net/3tjbhjtq/54/ 这是代码：

$(".drag").draggable({

  opacity  : 0.7,
  snap     : '#drop',
  cursor   : "move",
  revert   : "invalid",
  helper   : "clone"

});

$("#drop").droppable({

  drop: function(event, ui) {

    var currenOffset = ui.offset;

    var dropedObjectCss = {
      "position" : "absolute",
      "left"     : currenOffset.left,
      "top"      : currenOffset.top
    };

    var tag = ui.draggable;

    if (tag.data('alreadydropped')) {
      var newItem = tag.css(dropedObjectCss).appendTo( this ); 

      newItem.draggable({
        opacity : 0.7,
        snap    : '#drop',
        cursor  : "move",
        revert  : "invalid"
      });

    } else {
      var newItem = tag.clone().css(dropedObjectCss).appendTo( this );

      newItem.data('alreadydropped', true).draggable({
        opacity : 0.7,
        snap    : '#drop',
        cursor  : "move",
        revert  : "invalid"
      });

    }
  }
});

这是你想要的结果吗？

我们的想法是，当第一次删除项目时，我们应该有不同的行为以及何时在容器中移动。这就是我们在数据中保持同步的原因。所以第一次（else块）我们克隆对象并附加到容器和将alreadydropped设置为true。每次用户移动项目后我们将进入if条件，该项目将不会被克隆，只会被转移到容器中。

Answer 3

您需要在克隆项目后将draggable函数应用于该项目并向其中添加一个类。如果项目返回到初始位置，则将其删除：

HTML代码

<div id="container">
  <div class="drag">
    <p>Exemple bloc 1</p>
  </div>
  <div class="drag">
    <p>Exemple bloc 2</p>
  </div>
</div>

<div id="drop">
  <p>Drop here</p>
</div>

CSS代码

#container{
  width: 100%;
}
.drag {
  height: 50px;
  width: 50px;
  background: #505050;
  color: #FFFFFF;
  padding: 10px;
  display: inline-block;
  margin: 0 10px 10px 10px;
}

#drop {
  width: 100%;
  height: 600px;
  background: #FFFFFF;
  border: 1px solid #999999;
}

jQuery代码

makeDragable($(".drag"));

$("#drop").droppable({
  accept: ".drag",
  drop: function(event, ui) {

    if( $(ui.draggable).hasClass("cloned") ) {        
       $(ui.draggable).css(ui.offset).css("position", "absolute");      
       return;    
    }

    var item = $(ui.draggable).clone();
    item.addClass("cloned");
    $(this).append(item);
    makeDragable(item);
  }
});

$("#container").droppable({
  accept: ".cloned",
  drop: function(event, ui) {
    $(ui.draggable).detach();
  }
});

function makeDragable(item) {
  item.draggable({
    opacity: 0.7,
    cursor: "move",
    helper: "clone"
  });
}

jsfiddle

在jQuery

3 个答案: