Question

我无法获取可拖动元素的外部div的id。

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

/// Droppables＆＃34; .snap＆＃34;

<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类。当我从.snap中拖出div时，我想得到.snap类的id。

我在这方面遇到了麻烦。最接近的功能是让我不明确！

有什么想法吗？

编辑目标：目标是知道每个col-letter的哪个ID放在哪个.snap类上。

我想到的方法是在按下按钮后获得请求，以便提供位置和字母。

例如，如果在id = 1上放置id = v。 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]);
   });

但它使我的join命令停止工作！

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

有什么想法吗？

Answer 1

以下内容将为您提供拖动元素和已删除元素的ID ..

var fs = require('fs');
eval(fs.read('papaparse.min.js'));

var config = {
    delimiter: "",  // auto-detect
    newline: "",    // auto-detect
    header: true,
    dynamicTyping: false,
    preview: 0,
    encoding: "utf-8",
    worker: false,
    comments: false,
    step: undefined,
    complete: undefined,
    error: undefined,
    download: false,
    skipEmptyLines: true,
    chunk: undefined,
    fastMode: undefined
};

var file = Papa.parse(fs.read('some_file.csv'), config);

for (var row in file.data) {
    // this prints [object Object],[object Object], etc
    console.log(file.data);

    // How do I get
    // value, value, value, value, etc

}

使用拖动功能

也是如此

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

小提琴

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

您在event.target处理程序中'drop'之后......

$(".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

为什么不能使用onclick处理程序存储值，然后在“删除”时检索它？

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

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

拖放。获取元素被拖动的ID

4 个答案: