如何拖动坠落的物体？

Question

我看了一下jQuery中的降雪插件。

我将窗口本身分成两个面板。一种用于坠落效果，另一种用于收集和移动物体。

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

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

---------编辑

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/