拖放使用jQuery匹配

我有9個可拖動元素和9個插槽。 5個可拖動元素需要匹配他們自己的插槽。其他4個元素需要在其餘4個插槽中的任何一個上放置......不管他們插入的四個插槽中的哪一個都沒有關係。拖放使用jQuery匹配

以下代碼適用於在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>

來源

2013-01-04 IlludiumPu36

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

這只是一個沒有爲$重複ID引用（ '＃element_2'）的事

來源

2013-01-04 06:29:12 IlludiumPu36

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

拖放使用jQuery匹配

回答

相關問題