1

9 つのドラッグ可能な要素と 9 つのスロットがあります。ドラッグ可能な要素のうち 5 つは、それぞれのスロットに一致する必要があります。残りの 4 つの要素は、残りの 4 つのスロットのいずれかにドロップ可能である必要があります...4 つのスロットのどれにドロップされるかは問題ではありません。

次のコードは、5 つのスロットで一意に一致する 5 つのドラッグ可能な要素に対して機能しますが、他の 4 つ ( #element_2) では 1 つのドラッグ可能な要素しか許可されません。#element_2ドラッグ可能な要素 (4 つすべて) を#slot_2ドロップ可能なスロットのいずれかに一致させる方法はありますか?

<!doctype html>
<html lang="en">
<head>
<title>Assay - Overview</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="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript">

$(init);

function init() {


    $('#element_1').data( 'number', 1 ).attr( 'id', 'card'+1 ).draggable( {
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'move',
      revert: true
    } );

        $('#element_2').data( 'number', 2 ).attr( 'id', 'card'+2 ).draggable( {
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'move',
      revert: true
    } );

        $('#element_3').data( 'number', 3 ).attr( 'id', 'card'+3 ).draggable( {
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'move',
      revert: true
    } );

        $('#element_2').data( 'number', 2 ).attr( 'id', 'card'+2 ).draggable( {
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'move',
      revert: true
    } );

        $('#element_5').data( 'number', 5 ).attr( 'id', 'card'+5 ).draggable( {
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'move',
      revert: true
    } );

        $('#element_2').data( 'number', 2 ).attr( 'id', 'card'+2 ).draggable( {
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'move',
      revert: true
    } );

        $('#element_7').data( 'number', 7 ).attr( 'id', 'card'+7 ).draggable( {
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'move',
      revert: true
    } );

        $('#element_2').data( 'number', 2 ).attr( 'id', 'card'+2 ).draggable( {
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'move',
      revert: true
    } );

        $('#element_9').data( 'number', 9 ).attr( 'id', 'card'+9 ).draggable( {
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'move',
      revert: true
    } );


  // Create the element slots

    $('#slot_1').data( 'number', 1 ).droppable( {
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    } );

        $('#slot_2').data( 'number', 2 ).droppable( {
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    } );

        $('#slot_3').data( 'number', 3 ).droppable( {
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    } );

        $('#slot_2').data( 'number', 2 ).droppable( {
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    } );

        $('#slot_5').data( 'number', 5 ).droppable( {
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    } );

        $('#slot_2').data( 'number', 2 ).droppable( {
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    } );

        $('#slot_7').data( 'number', 7 ).droppable( {
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    } );

        $('#slot_2').data( 'number', 2 ).droppable( {
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    } );

        $('#slot_9').data( 'number', 9 ).droppable( {
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    } );
}

function handleCardDrop( event, ui ) {
  var slotNumber = $(this).data( 'number' );
  var cardNumber = ui.draggable.data( 'number' );

  if ( slotNumber == cardNumber ) {
    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 );
  } 
}
</script>
</head>
<body>
<div id="content">
  <div id="cardPile"> 
  <div id="element_3">Harvest Cells for Virus stock generation</div>
  <div id="element_2">Maintain Cell Line</div>
  <div id="element_9">Freeze Cell Line for long term storage</div>
  <div id="element_2">Maintain Cell Line</div>
  <div id="element_5">Harvest Cells for TCID50</div>
  <div id="element_2">Maintain Cell Line</div>
  <div id="element_7">Harvest Cells for Microneut</div>
  <div id="element_1">Establish Cell Line</div>
  <div id="element_2">Maintain Cell Line</div> 
  </div>
  <div id="cardSlots"> 
  <div id="slot_1" style="position: absolute; left: 797px; top: 223px;"></div>
  <div id="slot_2" style="position: absolute; left: 958px; top: 281px;"></div>
  <div id="slot_3" style="position: absolute; left: 1044px; top: 428px;"></div>
  <div id="slot_2" style="position: absolute; left: 1015px; top: 597px;"></div>
  <div id="slot_5" style="position: absolute; left: 884px; top: 709px;"></div>
  <div id="slot_2" style="position: absolute; left: 712px; top: 708px;"></div>
  <div id="slot_7" style="position: absolute; left: 580px; top: 600px;"></div>
  <div id="slot_2" style="position: absolute; left: 550px; top: 430px;"></div>
  <div id="slot_9" style="position: absolute; left: 637px; top: 281px;"></div> 
  </div>
</div>

</body>
</html>
4

1 に答える 1

0

$('#element_2') の ID 参照を繰り返さないことが問題でした。

于 2013-01-04T06:29:12.830 に答える