jQuery UIをスクロール可能なdivにドラッグ可能

Question

私が探しているものの解決策を見つけましたが、それはもはや維持されていないライブラリを使用しており、最新のjQuery UIでは最新ではない可能性があります。ここでは例です：http://jsfiddle.net/crowjonah/Fr7u8/2/（そのソリューションがsimilar question from nearly 5 yrs agoからである）

基本的に、私は（それにoverflow-y:scrollセットを持っています）スクロール可能であるdiv要素にドラッグ可能なjQueryのUIをドラッグできるようにしたいです。同様に、ユーザーがdivの上または下を移動すると、divをスクロールして、ユーザーがアイテムを配置したいドロップ可能を探します。

はここでフィドルのスクリーンショットです：

濃い灰色の領域上部と下部には、上下にスクロールや原因ホバー可能なのdivです。それぞれの "ここに落ちる"とは、落書き可能です。

このような人は誰ですか？

また、読者は知っているように、an issue if you drop an item below or above the scrollable area if items are down thereがあります。基本的に、オーバーフロー領域にあるdroppablesにドロップできます。

Answer 1

これはいくつかの方法で行うことができます。ここには、jQuery 3.2.1とjQuery UI 1.12.1で外部ライブラリとセットアップを必要としないものがあります。

はJavaScript

$(function() { 
    $('.drag_me').draggable({ 
    helper: 'clone', 
    scroll: 'true', 
    refreshPositions: true 
    }); 
    $('.drop_on_me').droppable({ 
    accept: '.drag_me', 
    activeClass: 'active', 
    hoverClass: 'hover', 
    tolerance: 'pointer', 
    over: function(e, ui) { 
     var buffer = 16; 
     var step = 30; 
     var speed = 250; 
     var upper = $('.drop_area').position().top + buffer; 
     var lower = $('.drop_area').position().top + $('.drop_area').height() - buffer; 
     var current = $('.drop_area').scrollTop(); 
     switch (true) { 
     case (ui.position.top <= upper): 
      console.log("Direction: Up"); 
      $('.drop_area').animate({ 
      scrollTop: current - step 
      }, speed); 
      break; 
     case ((ui.position.top + ui.helper.height()) >= lower): 
      console.log("Direction: Down"); 
      $('.drop_area').animate({ 
      scrollTop: current + step 
      }, speed); 
      break; 
     } 
    } 
    }); 
}); 

実施例：http://jsfiddle.net/Twisty/rmq15a0w/7/

あなたが言及したライブラリが滑らかにすることができ、私はこれを改善することができる可能性が疑われるが、それは機能的に物事の同じ種類を行います。私はswitch()を使用しました。余分な「スピード」設定をカバーしたかったのです。たとえば、500項目のリストがある場合などです。 upper-1とupper-2があります。ユーザーがupper-1にドラッグすると、step * 2にスクロールされ、upper-2はstepに移動します。また、左または右にスクロールする場合は、overにleftを使用することもできます。

多くのオプションがあります。お役に立てれば。