Question

我是JQuery的新手，并在网站上完成了一系列的教程和答案，但是我无法解决这个问题，并希望得到任何帮助。

我正在尝试创建一个函数，其中有一系列可拖动和可放置的div。每个都只被接受到相关的插槽中。

一旦进入插槽，就会出现一个小'x'，用户可以点击该按钮将可拖动元素发送回其父级。

我几乎在那里这个代码几乎可以工作 - 我有插槽，我有可拖动的元素。当它停止时会出现'x'，但我可以让'x'工作以使div返回家中。

任何帮助表示赞赏。这是我的代码：

<!doctype html>
<html lang="en">
<head>
Drag and drop</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">

<script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

<script type="text/javascript">
$( init );

function init() {
// Reset 
$('#defPile').html( '' );
$('#defSlots').html( '' );
$('#gkPile').html( '' );
$('#gkSlots').html( '' );

// Create defenders
  var numbers = [ 1, 2, 3, 4 ];
  var position = 'd';  
  for ( var i=0; i<4; i++ ) {
    $('<div>' + numbers[i] + "<span class='undo' style='display:none'>x</span> </div>").data( 'number', numbers[i] ).data( 'position', 'd' ).attr( 'id', 'card'+numbers[i]  ).appendTo( '#defPile' ).draggable( {
      containment: '#content',
      stack: '#defPile div',
      revert: 'invalid',
      stop: function(event, ui){
        $(this).find('.undo').show();   
        $(this).draggable('option','revert','invalid');
      }
    } );
  } 

    // Create the pile gk cards
  var numbers = [ 1, 2, 3, 4, 5 ];
  var position = 'g';

  for ( var i=0; i<5; i++ ) {
    $('<div>' + numbers[i] + "<span class='undo' style='display:none'>x</span></div>").data( 'number', numbers[i] ).data( 'position', 'g' ).attr( 'id', 'card'+numbers[i] ).appendTo( '#gkPile' ).draggable( {
      containment: '#content',
      stack: '#gkPile div',
      revert: 'invalid',
      stop: function(event, ui){
        $(this).find('.undo').show();   
        $(this).draggable('option','revert','invalid');
      }
    } );
  }

     // Create the def slots
  var words = [ 'def' ];
    $('<div>' + 'defender' + '</div>').data( 'number', i ).appendTo( '#defSlots' ).droppable( {
      accept: '#defPile div',
      hoverClass: 'hovered',
  drop: handleCardDrop      
    } );

     // Create the gk slots
  var words = [ 'gk' ];
    $('<div>' + 'goalie' + '</div>').data( 'number', i ).appendTo( '#gkSlots' ).droppable( {
      accept: '#gkPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop      
    } );

 }


function handleCardDrop(event,ui ) {
        ui.draggable.draggable('option','revert',false);
    if (!ui.draggable.data("originalPosition")) {
        ui.draggable.data("originalPosition",
                          ui.draggable.data("draggable").originalPosition);
                          $(this).droppable( 'disable' );
    }


  var slotNumber = $(this).data( 'number' );
  var cardNumber = ui.draggable.data( 'number' );
  var position = ui.draggable.data( 'position' );


    //ui.draggable.addClass( 'correct' );
     ui.draggable.draggable( 'disable' );
    //$(this).droppable( 'disable' );
    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
    ui.draggable.draggable( 'option', 'revert', false );

    //$(this).draggable('option','revert','invalid');
}

$('.gkPile').find('.undo').click(function(i, e) {
    var $div = $(this).parent();
    revertDraggable($div);
});

$('.defPile').find('.undo').click(function(i, e) {
    var $div = $(this).parent();
    revertDraggable($div);
});

function revertDraggable($selector) {
    $selector.each(function() {
        var $this = $(this),
        position = $this.data("originalPosition");

        if (position) {
            $this.animate({
            left: position.left,
            top: position.top
        }, 500, function() {
            $this.data("originalPosition", null);
        });
    }
    });
        $selector.find('.undo').hide();

}

</script>

 </head>
<body>

<div id="content">

  <div id="defPile"> </div>
  <div id="defSlots"> </div>

<div id="gkPile"> </div>
  <div id="gkSlots"> </div>

 </div>

</div>


 </body>
 </html>

有一个工作示例：http://www.lfc-predictions.co.uk/dragtest/index3.php

Answer 1

看一下页面，看起来你非常接近！只需将点击事件的选择器从类选择器更改为 id 选择器

$('#gkPile').find('.undo').click(function(i, e) {
    var $div = $(this).parent();
    revertDraggable($div);
});

$('#defPile').find('.undo').click(function(i, e) {
    var $div = $(this).parent();
    revertDraggable($div);
});

对于jQuery选择器，对于id使用＃ ，对于类使用。。

可拖动的JQuery - 允许div在点击时返回父级

1 个答案: