jQuery ড্র্যাগ এবং ড্রপ সিমুলেশন শেষ draggable জন্য কাজ করে না



jquery-ui drag-and-drop (1)

আমি jquery-ui এর jquery- jquery-simulate-ext প্লাগইন ব্যবহার করে ড্র্যাগ এবং ড্রপ সিমুলেশন অনুকরণ করার চেষ্টা করছি।

আমি দৃশ্যকল্প বিস্তারিত জানার আগে, আমাকে here আপনি জেএস fiddle দেখান।

আমার divs 3 কলাম আছে। প্রথম কলামে, আমার দেশের নামগুলির সাথে 3 টি Draggables আছে, দ্বিতীয় কলামে 3 ফাঁকা divs এবং 3 য় কলাম 3 স্বাভাবিক div শহরের নাম সঙ্গে। তাই, দ্বিতীয় ক্লোনে প্রথম কলাম থেকে সমস্ত ড্র্যাগগেল বাদে, দ্বিতীয় এবং তৃতীয় কলাম সারি দেশ-শহর সম্পর্কের একটি ধারনা তৈরি করবে।

কিন্তু সমস্যাটি সিমুলেশন সম্পন্ন হওয়ার পরে, প্রথম এবং দ্বিতীয় ড্র্যাগগেলগুলি প্রত্যাশিত ড্রপপেবেলগুলিতে বাদ দেওয়া হয় তবে তৃতীয় ড্র্যাগযোগ্য কেবল ড্রপযোগ্য হওয়ার পরিবর্তে মাউসের দিকে লাঠি দেয়। আচরণের সন্ধানের জন্য, লোডের উপরে উল্লিখিত জেএস ফীল্ড পৃষ্ঠাটি পরে, ফলাফল বিভাগে আপনার মাউস কার্সারটি সরান এবং আপনি দেখতে পাবেন যে একটি draggable মাউস বরাবর চলছে। ড্র্যাগযোগ্য যোগ্য ড্র্যাগযোগ্য বা ড্র্যাগযোগ্য বিভাগে আপনি কোথাও ক্লিক করতে হবে (আপনি কোন এলাকায় ক্লিক করছেন তার উপর নির্ভর করে)। এটি কেবলমাত্র ফায়ারফক্সে ঘটে যখন ক্রোমে , draggable শুধু কার্সারের পাশে ঠিক ড্রপযোগ্য বিভাগের ভিতরে চলে যায় এবং তারপরে এটি স্বয়ংক্রিয়ভাবে ভিতরে বসায়।

আমি যা চাই তা হল: অন্য Draggables সঙ্গে, তৃতীয় draggable মাউস চলন্ত সঙ্গে বরাবর সরানো উচিত এবং স্বয়ংক্রিয়ভাবে পছন্দসই droppable বসতে হবে।

কোড ব্যাখ্যা:

ক্লাস draggable_div সহ প্রতিটি draggable div একটি বৈশিষ্ট্য data-index (মান 1,2,3 ইত্যাদি) আছে। একই দৃশ্যকল্প droppable divs (ক্লাস droppable_blank সঙ্গে) সঙ্গে সত্য। এখন জেস কোডের শুরুতে আমার লাইন আছে:

answers_found='[1,2,3]';

এই মূলত draggables থেকে data-index । মূল্যের ক্রম কেবল ড্রপেবেলগুলিতে বসে থাকা ড্রাগগেবেলগুলির data-index মানগুলির ক্রম দেখায়। উল্লিখিত ক্ষেত্রে, প্রথম মানটি 1, তাই এটি প্রথম (দ্বিতীয় বা তৃতীয় নয়) ড্র্যাগযোগ্য হতে হবে যা প্রথম ড্রপেবলে বসবে। একইভাবে ২ য় এবং 3 য় draggable ধারাবাহিকভাবে 2nd এবং 3rd droppables বসতে হবে।

কোড লুপ for নিম্নলিখিত executes

for(var i =0; i<answers_found.length; i++){

answers_found অ্যারের থেকে মান প্রতিটি পেতে। এই মান draggable data-index বৈশিষ্ট্য মান। তারপর call_trigger_drop ফাংশনটি 2 টি call_trigger_drop দেওয়া হয়:

call_trigger_drop(parseInt(answer_found_indiv),droppable_index);

প্রথমটি ড্র্যাগযোগ্য ইন্ডেক্স এবং দ্বিতীয়টি একই ড্রপযোগ্য সূচক, অর্থাৎ ড্র্যাগযোগ্য, ড্রপযোগ্য হতে পারে। প্রকৃত সিমুলেশন তখন নিম্নলিখিত লাইনগুলির সাথে সংঘটিত হয়:

draggable.simulate("drag", {
                dx: dx,
                dy: dy
            });

টি এল; ডিআর:

প্রথম কলাম থেকে Draggables দ্বিতীয় কলামের ড্রপপ্যাবলগুলিতে ড্রপ করার জন্য সিমুলেটেড হয় যখন তৃতীয় কলামটি কেবলমাত্র স্বাভাবিক div গুলি হয়। ড্র্যাগ এবং ড্রপ সিমুলেশনের পরে, তৃতীয় draggable ফায়ারফক্সে তৃতীয় ড্রপেবলে বসতে না এবং একটি ক্লিক সঞ্চালিত না হওয়া পর্যন্ত কার্সার বরাবর সরানো। কিভাবে এটি অন্যান্য draggables মত স্বয়ংক্রিয়ভাবে droppable উপর বসতে?

সম্পাদনা করুন:
আপনি যদি জেএস-ফীল্ডের পরিবর্তে স্বাভাবিক ওয়েব পৃষ্ঠা হিসাবে ফলাফল পেতে চান, তবে আপনি এটি here খুঁজে পেতে পারেন।

console = {};
console.log = function(){};
window.console = console;
drag_stop_counter = 0;
answers_found = '[3,2,1]';
answer_all_zero = 0; //REMOVABLE
if (answers_found != "".trim()) {
  answers_found = $.parseJSON(answers_found);
  answer_all_zero = 1;
  for (var i = 0; i < answers_found.length; i++) {
    if (parseInt(answers_found[i]) != 0) {
      answer_all_zero = 0;
      break;
    }
  } //end of for loop
}
total_answers_found = answers_found.length;
total_actual_answers_found = 0;
for (var i = 0; i < answers_found.length; i++) {
  if (parseInt(answers_found[i])) {
    ++total_actual_answers_found;
  }
} //end of for loop
answers = [];
answers_made_for_insert = [];
question_id = 2901;
//Following function is triggered
//when the dNd component is starting the drop
//event
function trigger_drop(draggable_elem_index, droppable_elem_index) {
  if (draggable_elem_index && droppable_elem_index) {
    if (window.console) {
      console.log("from within trigger_drop : draggable_elem_index = " + draggable_elem_index + " droppable_elem_index=  " + droppable_elem_index);
    }
    // var draggable = $(".draggable_container_indiv .draggable_div").eq(draggable_elem_index-1).draggable(),
    var draggable = $(".draggable_container_indiv").eq(draggable_elem_index - 1).find(".draggable_div").draggable(),
      droppable = $("#droppable_slots .droppable_blank").eq(droppable_elem_index - 1).droppable(),
      droppableOffset = droppable.offset(),
      draggableOffset = draggable.offset(),
      dx = droppableOffset.left - draggableOffset.left,
      dy = droppableOffset.top - draggableOffset.top;
    draggable.simulate("drag", {
      dx: dx,
      dy: dy
    });
  } // end of if(draggable_elem_index && droppable_elem_index){
} // end of function trigger_drop(

//answers stored in array for insertion in DB
function make_answers_for_insert(answer_given) {
  answers_made_for_insert.push(answer_given);
} //end of function answers_for_insert
//finds answers from array
function find_answers() {
  answers = [];
  $('input[name="' + question_id + '[]"]').each(function() {
    $elem = $(this);
    var value_found = $elem.val().trim();
    if (value_found == "".trim()) {
      value_found = "0";
    }
    // if(value_found!="".trim()){
    answers.push(value_found);
    // }
  });
  //alert("answers made "+answers);
  if (window.console) {
    console.log("answers from find_answers = ");
    console.log(answers);
  }
} //end of function find_answers

function call_trigger_drop(answer_found_indiv, droppable_index) {
  trigger_drop(answer_found_indiv, droppable_index);
}
function insert_answer() {
  if (window.console) {
    console.log(" can_submit in insert_answer = " + can_submit);
  }
  if (can_submit) {
    can_submit = 0
    $("#draggable .draggable_div").draggable('disable');
    //ui.draggable.draggable({disabled: true});
    $('#droppable_slots li').find('.ui-draggable').draggable({
      disabled: true
    });
    answers = [];
    $('input[name="' + question_id + '[]"]').each(function() {
      $elem = $(this);
      var value_found = $elem.val().trim();
      if (value_found == "".trim()) {
        value_found = "0";
      }
      // if(value_found!="".trim()){
      answers.push(value_found);
      // }
    });
    answers = JSON.stringify(answers);
    if (window.console) {
      console.log("answers from insert_answers = ");
      console.log(answers);
    }
    //ajax call for insertion
  } // end of if(can_submit){
} // end of function insert_anwers
$(document).ready(function() {
  answer_status = 0;
  review_table_status = 0;
  $('input[name="' + question_id + '[]"]').each(function() {
    var dnd_value_found = $(this).val().trim();
    if (window.console) {
      console.log(" dnd_value_found = " + dnd_value_found);
    }
    if (dnd_value_found != "".trim()) {

      answer_status = 1;
      review_table_status = 1;
      return false;
    }
  }); // end of each
  var draggable_counter = 0;
  $(".draggable_container_indiv").each(function() {
    // $draggable_elem=$(this);
    $draggable_elem = $(".draggable_div").eq(draggable_counter);
    var $droppable_elem = $(".droppable_content_indiv").eq(draggable_counter);
    var $draggable_container_indiv_elem = $(".draggable_container_indiv").eq(draggable_counter);
    var $droppable_blank_elem = $(".droppable_blank").eq(draggable_counter);
    var droppable_height = $droppable_elem.css('height');
    var draggable_height = $draggable_elem.css('height');
    var droppable_width = $droppable_elem.css('width');
    var draggable_width = $draggable_elem.css('width');
    var height_more = 0;
    if (parseInt(draggable_height) > parseInt(droppable_height)) {
      height_more = draggable_height;
    } else {
      height_more = droppable_height;
    }
    var width_more = 0;
    if (parseInt(draggable_width) > parseInt(droppable_width)) {

      width_more = draggable_width;

    } else {
      width_more = droppable_width;
    }

    if (window.console) {

      console.log(" draggable_height " + draggable_height + " droppable_height = " + droppable_height + " height_more = " + height_more);

    }
    $draggable_elem.css({
      'height': height_more
    });
    $droppable_elem.css({
      'height': height_more
    });
    $droppable_blank_elem.css({
      'height': height_more
    });
    $draggable_container_indiv_elem.css({
      'height': height_more
    });
    //$('.draggable_container_indiv').css({'height':22});// hhhhhhhh

    $draggable_elem.css({
      'width': width_more
    });
    $droppable_elem.css({
      'width': width_more
    });
    $droppable_blank_elem.css({
      'width': width_more
    });
    $draggable_container_indiv_elem.css({
      'width': width_more
    });
    $droppable_elem.find(".ui-draggable").css({
      'width': width_more
    });


    ++draggable_counter;



  });


  $("#draggable .draggable_div").draggable({
    scroll: false,
    revert: true,
    // helper: 'clone',
    //appendTo: 'body',
    start: function() {

      if (window.console) {

        console.log(" draggable started ....... ");
      }

      $(this).css({
        display: 'none'
      });


    },
    stop: function() {


      $(this).css({
        display: 'block'
      });
      var draggableIndex = $(this).data('index');
      ++drag_stop_counter;
      if (window.console) {

        console.log(" draggable stopped = " + drag_stop_counter);

        console.log("draggable index in stop = " + draggableIndex);

      }


      var droppableIndex = $('#droppable_slots li').find('.ui-draggable[data-index=' + draggableIndex + ']').closest('.slot').data('index');

      var index_found = $.inArray(draggableIndex + "", answers);

      if (window.console) {
        console.log("inside stop  draggableIndex = " + draggableIndex + " after dropped ..... index_found = " + index_found);

      }



    },
    revert: function(dropped) {


      var dropped = dropped && dropped.hasClass('slot'); //fix duplicated IDs
      if (!dropped) {
        $(this).appendTo($(this).data('originalParent'))
      }
      return !dropped;


    },
    revertDuration: 0, //removed glitched effect
    helper: function() {
      return $(this).clone().appendTo('body').show();
    },
    containment: '.sel_screen_left'
  }).each(function() {
    $(this).data('originalParent', $(this).parent())
  });


  $("#droppable_slots li").droppable({
    //        tolerance:'pointer',
    tolerance: 'intersect',
    drop: function(event, ui) {

      $(this).trigger('dropthis', [event, ui]); //REMOVABLE

      $(this).trigger("dropthis", [{}, {
        draggable: ui.draggable
      }]); //REMOVABLE



      var $this = $(this);
      if ($this.find('.ui-draggable').length) return; //don't overwrite occupied spot
      //$this.empty();
      $this.append(ui.draggable);

      var width = $this.width();
      var height = $this.height();
      var cntrLeft = (width / 2) - (ui.draggable.width() / 2);
      var cntrTop = (height / 2) - (ui.draggable.height() / 2);

      ui.draggable.css({
        left: cntrLeft + "px",
        top: cntrTop + "px"
      });

      var draggableIndex = parseInt(ui.draggable.data("index"));
      var droppableIndex = parseInt($(this).data("index"));

      if (window.console) {

        console.log(" draggableIndex = " + draggableIndex + " droppableIndex = " + droppableIndex + " question_id = " + question_id);

      }


      if (window.console) {
        console.log("droppable question_id = " + question_id);
        console.log(" droppable drop has  draggableIndex answer  = " + draggableIndex);

      }




      if (window.console) {
        console.log(" inside drop .......................... ");

      }


      var index_found = $.inArray(draggableIndex + "", answers);

      if (window.console) {
        console.log(" draggableIndex = " + draggableIndex + " after dropped ..... index_found = " + index_found);

      }
      if (index_found != -1) {
        answers[index_found] = '';

        $('input[name="' + question_id + '[]"]').eq(index_found).val('');
      }






      $(".droppable_blank[data-index=" + droppableIndex + "]").trigger('click');

      if (window.console) {
        console.log(" droppable_blank clicked   droppableIndex = " + droppableIndex);

      }



    },
    out: function(event, ui) {


    },
    over: function(event, ui) {

    }
  });



  if (window.console) {

    console.log("DnD ANSWERS  found = ");
    console.log(answers_found);

  }


  answer_found_indiv = 0;
  droppable_index = 0;
  for (var i = 0; i < answers_found.length; i++) {

    //return false;

    if (window.console) {

      console.log(" iterating all answers:  DnDDnDDnDDnDDnD dragndrop draggable index = " + answers_found[i] + " droppable index = " + (i + 1));

    }

    var droppable_index = i + 1;
    var answer_found_indiv = parseInt(answers_found[i]);
    if (answer_found_indiv == 0) {

      if (window.console) {

        console.log(" answer_found_indiv 000000000000000000");

      }

    } else if (answer_found_indiv) {

      if (window.console) {

        console.log("Trigger Drop = " + answer_found_indiv, " droppable_index = " + droppable_index);

      }

      call_trigger_drop(parseInt(answer_found_indiv), droppable_index);

    }



  } // end of for loop




});
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.draggable_container_indiv{

    border: 1px solid green;

}

#draggable .draggable_div {
    margin-left: -60px;
    padding: 10px;
}
.droppable_blank{
    /*line-height: 40px;*/
    vertical-align: middle;
}
#draggable li, #draggable .draggable_div, #droppable_slots li, .draggable_div{
    list-style: none;
}
.dragndrop-questions ul.option-left li{
    padding-top: 0;
}
.match-questions ul.option-left li, .dragndrop-questions ul.option-left li{
    font-size: 14px;
    color: #656f7d;
    position: relative;
    padding-left: 60px;
    min-height: 40px;
}

.draggable_container_indiv{

    margin-bottom: -10px !important;
}
<link href="https://epractice.lcbsdhaka.com/mytest/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://epractice.lcbsdhaka.com/mytest/js/jquery-ui-1.12.1.custom/jquery-ui.css"></link>
    <script src="https://epractice.lcbsdhaka.com/mytest/js/jquery-1.12.4.js"></script>


    <script src="https://epractice.lcbsdhaka.com/mytest/js/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>

    <script src="https://epractice.lcbsdhaka.com/mytest/js/bootstrap.min.js"></script>

    <script src="https://epractice.lcbsdhaka.com/mytest/js/jquery.simulate.js"></script>
    <script src="https://epractice.lcbsdhaka.com/mytest/js/jquery-simulate-ext/src/jquery.simulate.ext.js"></script>
    <script src="https://epractice.lcbsdhaka.com/mytest/js/jquery-simulate-ext/src/jquery.simulate.drag-n-drop.js"></script>


<script src="https://epractice.lcbsdhaka.com/mytest/js/bootstrap.min.js"></script>

<script src="https://epractice.lcbsdhaka.com/mytest/js/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>



<div class="dragndrop-questions row">



  <div>
    <div style="width:30%; float: left; ">
      <ul class="option option-left" id="draggable">

        <li  class="draggable_container_indiv noselect">
          <div class="draggable_div" data-index="1">

            USA
          </div>
        </li>

        <li  class="draggable_container_indiv noselect">
          <div class="draggable_div" data-index="2">

            JAPAN
          </div>
        </li>

        <li  class="draggable_container_indiv noselect">
          <div class="draggable_div" data-index="3">

            CHINA
          </div>
        </li>

      </ul>
    </div>
    <div  style="width:65%; float: right; margin-right: 10px;">
      <ul class="option option-right" id="droppable_slots">


        <div class="row ">
          <div style="width:45%; float: left; margin-left:10px; border: 1px solid red;">

            <li class="slot droppable_blank noselect" data-index="1">


            </li>

          </div>
          <div style="width:48%; float: right; border: 1px solid yellow;">


            <li class="droppable_content_indiv noselect">
              <p>
                NewYork
              </p>


            </li>
          </div>
        </div>
        <!--end of class row -->

        <div class="row ">
          <div style="width:45%; float: left; margin-left:10px; border: 1px solid red;">

            <li class="slot droppable_blank noselect" data-index="2">


            </li>

          </div>
          <div style="width:48%; float: right; border: 1px solid yellow;">


            <li class="droppable_content_indiv noselect">
              <p>
                Tokyo
              </p>

            </li>
          </div>
        </div>
        <!--end of class row -->


        <div class="row ">
          <div style="width:45%; float: left; margin-left:10px; border: 1px solid red;">

            <li class="slot droppable_blank noselect" data-index="3">


            </li>

          </div>
          <div style="width:48%; float: right; border: 1px solid yellow;">


            <li class="droppable_content_indiv noselect">
              <p>
                Beijing
              </p>

            </li>
          </div>
        </div>
        <!--end of class row -->




      </ul>
    </div>

    <div class="" style="clear: both;"></div>
  </div>


</div>
<!-- end of class dragndrop-questions-->

https://src-bin.com


Answer #1

এটি drop ছাড়া শুধুমাত্র drag ইভেন্ট সিমুলেশন করে কারণ এটি পরিবর্তে drag-n-drop ব্যবহার করুন।

draggable.simulate("drag-n-drop", {dx: dx,  dy: dy});




jquery-ui-droppable