删除后更改可拖动的元素内容

我有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>

来源

2013-01-04 IlludiumPu36

壁...把它放在一个[小提琴]（http://jsfiddle.net） – Jason

HTTP： //jsfiddle.net/GGrTW/ – IlludiumPu36

如果我理解正确的话，如果你知道的网址应该是，你可能将其包含在数据属性，然后用与HREF锚标记放在你的文字。

来源

2013-01-04 02:36:47 Jason

好的，谢谢，我有

Harvest Cells for Virus stock generation

，并决定最好让div可点击。所以玩ui.draggable.onclick =“window.open（”+ ui.draggable.attr（'data-link'）+“）”;不起作用。有任何想法吗？ – IlludiumPu36

使用了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-04 04:53:25 IlludiumPu36

http://jsfiddle.net/jgvWS/ – IlludiumPu36

删除后更改可拖动的元素内容

回答

相关问题