拖放。 獲取從中拖動元素的位置的id

Question

我在獲取要拖動元素的外部div的ID時遇到問題。

這是我的HTML http://dev.eteacher.online/taskAssets/cup.jpg'/>

/// Droppables“ .snap”

<div id="0" class='col-word'><p class="letters">c</p></div>
<div id="1" class='col-word snap' style=""><p class="letters">__</p></div>
<div id="2" class='col-word snap' style=""><p class="letters">__</p></div>

///可拖動對象

<div id="comparison">
    <div id="v"  class='col-letter'><p class="letters">v</p></div>
    <div id="p"  class='col-letter'><p class="letters">p</p></div>
    <div id="u"  class='col-letter'><p class="letters">u</p></div>
</div>

然后我有重要的jQuery

   var  beh = new Array();
    var beh2 = "";
    var MyVar = "";

    $(".col-letter").draggable({ cursor: 'move', snap: '.snap',
        revert : function(event, ui) {
            // on older version of jQuery use "draggable"
            // $(this).data("draggable")
            // on 2.x versions of jQuery use "ui-draggable"
            // $(this).data("ui-draggable")
            $(this).data("ui-draggable").originalPosition = {
                top : 0,
                left : 0
            };
            // return boolean
            return !event;
            // that evaluate like this:
            // return event !== false ? false : true;
        },
        drag: function(event, ui){
                    if($(this).data('droppedin')){
            $(this).data('droppedin').droppable('enable');
            $(this).data('droppedin',null);
            $(this).removeClass( 'dropped' );
             MyVar =  $(this).closest(".col-word").attr("id");   
             alert(MyVar); 
            beh[MyVar] = "";
             alert(beh);
         }
        }
    });
$(".snap").droppable({
    hoverClass: 'hovered',
    tolerance: 'pointer',
    drop: function(event, ui) {    
    var drop_p = $(this).offset();
    var drag_p = ui.draggable.offset();
    var left_end = drop_p.left - drag_p.left;
    var top_end = drop_p.top - drag_p.top ;
    ui.draggable.animate({
        top: '+=' + top_end,
        left: '+=' + left_end
    });
    ui.draggable.addClass( 'dropped' );

   ui.draggable.data('droppedin',$(this));
     $(this).droppable('disable');

}
});


$( ".snap" ).on( "drop", function( event, ui ) {

    MyVar = $(this).parent().attr('id');
    beh[MyVar] = ui.draggable.attr('id');
    alert(beh[MyVar] + " " + MyVar);
  //  alert(beh);

    //beh[] = new Array($(this).attr('id'), ui.draggable.attr('id'));
   //alert(beh);
});

基本上，您可以將div拖入.snap類。 當我將div從.snap中拖出時，我想獲取.snap類的ID。

我在做這件事時遇到麻煩 最接近的功能使我無法定義！

有任何想法嗎？

編輯目標：目標是知道每個col-letter的哪個id放在哪個.snap類上。

我想到的方法是，一旦按下按鈕以提供位置和字母，就會有一個get請求。

例如，如果將id = v放在id = 1上。 get請求將啟用/ 1v。

編輯2

這工作了！

$(".snap").on("drop", function(event, ui) {
     MyVar = ui.helper.attr('id');
     beh[MyVar] = $(this).attr('id') + ui.helper.attr('id');
     alert(beh[MyVar]);
   });

但這會使我的加入命令停止工作！

  $( "#done" ).click(function(){
        beh2 = beh.join("");
        var link = "/task/fillLetters/response/"+ beh2;
        alert(beh2);
        window.location.replace(link);
});

有任何想法嗎？

Answer 1

以下內容將為您提供拖動元素和放置元素的ID。

   $(".snap").on("drop", function(event, ui) {
       MyVar = $(this).attr('id');
       beh[MyVar] = ui.helper.attr('id');
       alert(MyVar + " " + beh[MyVar]);
   });

使用拖動功能也是如此

MyVar = $(this).attr('id'); //to get your id

小提琴

https://jsfiddle.net/2a6tur6w/3/

Answer 2

我覺得這就是你所需要的

小提琴鏈接https://jsfiddle.net/bksL352s/

 var beh = new Array(); var beh2 = ""; var MyVar = ""; $(".col-letter").draggable({ cursor: 'move', snap: '.snap', revert: function(event, ui) { $(this).data("ui-draggable").originalPosition = { top: 0, left: 0 }; return !event; }, drag: function(event, ui) { if ($(this).data('droppedin')) { $(this).data('droppedin').droppable('enable'); $(this).data('droppedin', null); $(this).removeClass('dropped'); MyVar = $(this).attr('data-dropped-Id'); alert(MyVar); beh[MyVar] = ""; alert(beh); } } }); $(".snap").droppable({ hoverClass: 'hovered', tolerance: 'pointer', drop: function(event, ui) { var drop_p = $(this).offset(); var drag_p = ui.draggable.offset(); var left_end = drop_p.left - drag_p.left; var top_end = drop_p.top - drag_p.top; ui.draggable.animate({ top: '+=' + top_end, left: '+=' + left_end }); ui.draggable.addClass('dropped'); ui.draggable.data('droppedin', $(this)); $(this).droppable('disable'); } }); $(".snap").on("drop", function(event, ui) { MyVar = event.target.getAttribute('id'); beh[MyVar] = ui.draggable.attr('id'); ui.draggable.attr('data-dropped-Id', $(this).attr('id')); alert(beh[MyVar] + " " + MyVar); }); 

 .col-letter { display: inline-block; border: 1px solid #ccc; background: #eee; margin: 10px 0; transition: background ease-In .2s; } .col-word.snap { display: inline-block; border: 1px solid #000; background: #C5C5C5; } .dropped p { background: #CDDC39 !important; } .dropped { border-color: #000 !important; } .col-word.snap p { margin: 0; padding: 5px; width: 30px; height: 30px; text-align: center; line-height: 1.5; } .col-letter p { margin: 0; padding: 5px; width: 30px; height: 30px; text-align: center; line-height: 1.5; cursor: move; } 

 <link href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <div id="0" class='col-word'> <p class="letters">c</p> </div> <div id="1" class='col-word snap' style=""> <p class="letters">__</p> </div> <div id="2" class='col-word snap' style=""> <p class="letters">__</p> </div> <div id="comparison"> <div id="v" class='col-letter'> <p class="letters">v</p> </div> <div id="p" class='col-letter'> <p class="letters">p</p> </div> <div id="u" class='col-letter'> <p class="letters">u</p> </div> </div> 

希望這可以幫助..：）

Answer 3

您在'drop'處理程序中event.target ...

$(".snap").on("drop", function(event, ui) {  
    MyVar = $(event.target).attr('id');   // here
    beh[MyVar] = ui.draggable.attr('id');
    alert(beh[MyVar] + " " + MyVar);
});

小提琴： https : //jsfiddle.net/zoa3wL0n/

Answer 4

為什么不能在ondrop處理程序中存儲值，然后在“放置”時檢索它？

var draggedItem 
$(".snap").on("drag", function(event, ui) {
 draggedItem = $(this).attr('id');
});

$(".snap").on("drop", function(event, ui) {
  alert(draggedItem) 
});