如何拖动坠落的物体？

Question

我看了一下jQuery中的snow fall插件。

我将窗户本身分为两个面板。一个用于下降效果另一个用于收集和移动物体。

我可以点击一个雪花片并将其位置设置为新点并停止（从移动）。但是我想在窗格中移动它。我怎样才能做到这一点？

还有另一个问题。在重新定位薄片后，在每次连续点击时，薄片似乎连续重新定位。最好的是，

---------修改

1. 落雪（完成）
2. 将落雪拖到另一个窗格（右侧）。雪花应该停止掉落。应该能够将它拖到右侧的任何地方。
3. 双击以删除其他窗格（右侧）中的任何已停止和可拖动的薄片

---

这是当前的代码。

• jsFiddle

  // Snow Falling
  function fallingSnow() {
  
      var snowflake = $('<div class="snowflakes"></div>');
      $('#snowZone').prepend(snowflake);
      snowX = Math.floor(Math.random() * $('#site').width()/3);
      snowSpd = Math.floor(Math.random() + 50000);
  
      snowflake.css({'left':snowX+'px'});
      snowflake.animate({
          top: "700px",
          opacity : "5",
  
      }, snowSpd, function(){
          $(this).remove();
          fallingSnow();
      })
  
    //on click, the flake to be stopped, and re-positioned. To be able to drag it.
  
      $( function() {
        $(snowflake).click( function() {
          $(this).toggleClass("blue-cell");
          var pos = $(this).position().left + 200;
          var s = $(this);
          snowflake.css({'left': pos+'px'});                   
          $(s).stop();                      
          $(s).draggable();             
        });
      });      
  
   //on double click I want to remove the draggable flake in right side pane
   //              $(s).click(function(){
   //                  $(s).remove();
   //              }); 
  }
  
  var timer = Math.floor(Math.random() +2000);
  
  window.setInterval(function(){
      fallingSnow();
  }, timer);
  

参考： The original code was take from this post.

Answer 1

您只需将.draggable()应用于雪花

即可

http://jsfiddle.net/MzVFA/213/