1

我有 9 个可拖动元素和 9 个插槽。5 个可拖动元素需要匹配它们自己的插槽。其他 4 个元素需要可放置在其余 4 个插槽中的任何一个上……它们放置在四个插槽中的哪个上都没有关系。

以下代码适用于在 5 个插槽上具有唯一匹配的 5 个可拖动元素，但其他 4 个 ( #element_2) 只允许一个可拖动元素。有什么想法可以使#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

这只是没有重复 id 引用 $('#element_2') 的问题

于 2013-01-04T06:29:12.830 回答