Javascript ドラッグ&ドロップの機能でドロップがページ全体にできてしまう。ドロップできる場所を指定したい。

Question

検索ボタンを押すと、データテーブルが表示されるようになっており、
データテーブルの中でドラッグ＆ドロップしたいと思っております。
参考にしているサイトはこちらですリンク内容
また、デベロッパーツールのコンソールには添付画像の表示されています(dragenter,dragover,dropはすべて通っている様)。
ただ、dropがwebページ全体にできてしまっています。

☆の部分でデータテーブル作成
★の部分でドラッグ＆ドロップで使うdragdropというクラスを設定しています。
クラスのdragdropの部分がdropする場所に設定したいです。

$(document).ready(function () {

	var obj = $(".dragdrop");
	obj.on('dragenter', function (e)
	{
	    e.stopPropagation();
	    e.preventDefault();
	});
	obj.on('dragover', function (e)
	{
	     e.stopPropagation();
	     e.preventDefault();
	});
	obj.on('drop', function (e)
	{
	     e.preventDefault();
	});
	
	$(document).on('dragenter', function (e)
	{
	    e.stopPropagation();
	    e.preventDefault();
	    console.log("dragenter");
	});
	$(document).on('dragover', function (e)
	{
	  e.stopPropagation();
	  e.preventDefault();
	  console.log("dragover");
	});
	$(document).on('drop', function (e)
	{
	    e.stopPropagation();
	    e.preventDefault();
	    console.log("drop");
	});

});
////検索ボタンをクリックした処理
$(document).on('click', '.search-btn', function (event) {
  		//送信データの準備
		var postData = {
		        			'sceneId':		_scenarioSelected,
			                'elements':		_elements
		                };

		//データの取得（検索処理)
		$.ajax({
                headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: 'post',
                url: _url + 'ajax/searchResult',
                dataType: 'json',
                data: postData,
	     }).done(function (result, textStatus, jqXHR) {
        	//☆データテーブルの作成
        	drawDataTable(result);

        }).fail(function (data, textStatus, xhr) {

        });
});
function drawDataTable(result){
	//DataTableを生成する
  _dataTable = scenarioTable.DataTable({
		"language": {
		},
      select: {
          style: 'single',
          toggleable: false
      },
      altEditor: true,
      buttons: [
      	{
          }
      ],
		"data":result['aaData'],
		"columns": _headers,
		"columnDefs": [{
						    searchable: false,
						    orderable: false,
						    //
						    className: 'index-col hidden_col  dragdrop',//★class設定
						    targets: 0

						},…

Answer 1

documentにドラッグドロップ関連のイベントリスナを登録しなければよろしいのではないでしょうか。

※追記
この部分が余計です。

    $(document).on('dragenter', function (e)
    {
        e.stopPropagation();
        e.preventDefault();
        console.log("dragenter");
    });
    $(document).on('dragover', function (e)
    {
      e.stopPropagation();
      e.preventDefault();
      console.log("dragover");
    });
    $(document).on('drop', function (e)
    {
        e.stopPropagation();
        e.preventDefault();
        console.log("drop");
    });

参照されているサイトでは、$(".dragdrop")以外の部分にドラッグドロップがあった場合にドロップされたファイルを開くという動作を防ぐためにこの記述が入っています。
もしかしたら、$(".dragdrop")も$(document)も、どちらも「何もしない」という動作をしているために、ページ全体がドロップ受付をしていると誤認されているのではないでしょうか。
$(".dragdrop")と$(document)を明確に区別するために、それぞれ別の動作をさせて確認してみてはいかかでしょうか。

Comments

[lemonediscream]

ご回答ありがとうございます。
イベントリスナを登録しないとは以下であってますでしょうか？
var obj = $(".dragdrop");～console.log("drop");まで削除して、

$('.dragdrop').on('dragenter', function (e)
{
e.stopPropagation();
e.preventDefault();
console.log("4");
console.log(e);
});
$('.dragdrop').on('dragover', function (e)
{
e.stopPropagation();
e.preventDefault();
console.log("5");
console.log(e);

});
$('.dragdrop').on('drop', function (e)
{
e.stopPropagation();
e.preventDefault();
console.log("6");
console.log(e);
});
上記に変更したところ、ドラッグもきかなくなっていました。