Question

我有一个拖放系统，我想在将某些内容放入另一个容器时执行操作。所以我猜它有两种可能性，一种是在完成删除后执行jQuery操作，另一种是对包含可拖动项目的div中的更改做出反应。

这是我在执行拖动后要执行的操作（它现在是一个点击功能）

eventie.bind(button, 'click', function() {
  msnry = new Masonry( container );
});

这是拖放代码。

// Drag drop function.

(function ($) {
var lastPlace;

$(".painting").draggable({
    revert: true,
    zIndex: 10,
    snap: ".vote",
    snapMode: "inner",
    snapTolerance: 40,
    start: function (event, ui) {
        lastPlace = $(this).parent();
    }
});

$(".vote").droppable({
    drop: function (event, ui) {
        var dropped = ui.draggable;
        var droppedOn = this;

        if ($(droppedOn).children().length > 0) {
            $(droppedOn).children().detach().prependTo($(lastPlace));
        }

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

当您将绘画拖放到顶部的容器中时，会产生间隙。然后你必须点击带有绘画的容器来重新修改这个空白。我希望它在拖放功能完成后发生。 http://codepen.io/alucardu/pen/qubzx

Answer 1

经过一番研究后，我发现显示此代码的http://jqueryui.com/droppable/

$( "#droppable" ).droppable({
  drop: function( event, ui ) {
    $( this )
      .addClass( "ui-state-highlight" )
      .find( "p" )
        .html( "Dropped!" );
  }
});

我编辑到了这个：

$( ".vote" ).droppable({
    drop: function( event, ui ) {
      var dropped = ui.draggable;
      var droppedOn = this;

      if ($(droppedOn).children().length > 0) {
          $(droppedOn).children().detach().prependTo($(lastPlace));
      }

      $(dropped).detach().css({
          top: 0,
          left: 0
      }).prependTo($(droppedOn));
      msnry = new Masonry( container );
    }
  });

它现在在msnry = new Masonry( container );被删除后执行.vote代码。

在更改内容div时，请执行操作

1 个答案: