JQuery를 사용하여 일치시켜 드래그 앤 드롭

9 개의 드래그 가능한 요소와 9 개의 슬롯이 있습니다. 드래그 가능한 요소 중 5 개가 자체 슬롯과 일치해야합니다. 다른 4 개의 요소는 나머지 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

그것은 $에 대한 ('#의 element_2')를 반복 ID 참조를 가지고 있지의 문제였다

출처

2013-01-04 06:29:12 IlludiumPu36

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

JQuery를 사용하여 일치시켜 드래그 앤 드롭

답변

관련 문제