1

我有 9 个可拖动元素，我想让每个元素中的文本在放置后作为唯一的超链接激活。这需要为每个元素完成，因为它们中的大多数都有不同的文本。

使用 append 并向被删除的元素添加超链接可能更容易，而不是在删除后更改文本。但是附加的超链接对于每个元素都必须是唯一的。有什么想法可以使用以下代码执行此操作吗？

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

在 div 上使用：

  <div id="element_3" data-link="element_3.html">Harvest Cells for Virus stock generation</div>

接着：

ui.draggable.click(function(e) {  
        window.open(ui.draggable.attr('data-link'));
    });
于 2013-01-04T04:53:25.277 回答
0

如果我理解正确，如果您知道 URL 应该是什么，您可以将其包含在数据属性中，然后使用带有该 HREF 的锚标记包装您的文本。

于 2013-01-04T02:36:47.250 回答