1

ドラッグ可能な要素が9つあり、各要素のテキストをドロップ後に一意のハイパーリンクとしてアクティブにします。それらのほとんどは異なるテキストを持っているので、これは要素ごとに行う必要があります。

ドロップ後にテキストを変更するよりも、ドロップされた要素に追加してハイパーリンクを追加する方が簡単な場合があります。ただし、追加されるハイパーリンクは、要素ごとに一意である必要があります。次のコードでこれを行う方法はありますか？

<!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

2 に答える 2

0

私があなたを正しく理解していれば、URL がどうあるべきかを知っていれば、それをデータ属性に含めて、その HREF を含むアンカー タグでテキストをラップすることができます。

于 2013-01-04T02:36:47.250 に答える