JQuery перетаскиваемых Droppable с сортировкой

Question

Я пытаюсь сделать так, чтобы, когда я положил все слова в нижних плитках можно затем сортировать их между «Большинством Like Me наименее Like Me» Droppable области. Прямо сейчас, я могу перетащить их в разные коробки, но в одной области сбрасывается два перетаскиваемых друг друга. Я хочу, чтобы толкать другой перетаскиваемым из коробки и не позволить два draggables находиться в одной и той же сбрасываемой области, в то же время позволяя пользователю изменить свое мнение, если они делают ошибку или хотите прибегнуть их. Пожалуйста, найдите код ниже:

HTML

<div id="content"> 
    <div id="cardPile"> 
    <div id="question1">Spontaneous</div> 
    <div id="question2">Decisive</div> 
    <div id="question3">Realistic</div> 
    <div id="question4">Logical</div> 
    </div> 

    <div id="cardSlots"> 
    <div>Most Like Me</div> 
    <div>2nd Most Like Me</div> 
    <div>3rd Most Like Me</div> 
    <div>Least Like Me</div> 

    </div> 

</div> 

CSS

@charset "utf-8"; 
/* CSS Document */ 

/* Add some margin to the page and set a default font and colour */ 

body {margin: 30px;font-family: "Tahoma", serif;line-height: 1.8em;color: #333;} 

/* Give headings their own font */ 

h1, h2, h3, h4 { 
    font-family: Century Gothic, sans-serif; 
    font-weight:normal; 
} 

/* Main content area */ 

#content { 
    margin: 65px 0px; 
    text-align: center; 
    -moz-user-select: none; 
    -webkit-user-select: none; 
    user-select: none; 
} 

/* Header/footer boxes */ 

.wideBox { 
    clear: both; 
    text-align: center; 
    margin: 70px; 
    padding: 10px; 
    background: #ebedf2; 
    border: 1px solid #333; 
} 

.wideBox h1 { 
    font-weight: bold; 
    margin: 20px; 
    color: #666; 
    font-size: 1.5em; 
} 

/* Slots for final card positions */ 

#cardSlots { 
    margin: 10px auto 0 auto; 
    background:#D9F2FF; 
} 

/* The initial pile of unsorted cards */ 

#cardPile { 
    margin: 0 auto; 
    background: #ffffff; 
} 

#cardSlots { 
    width: 910px; 
    height: 55px; 
    padding: 20px; 
    border: 1px solid #999; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    -moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8); 
    -webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8); 
    box-shadow: 0 0 .3em rgba(0, 0, 0, .8); 
} 
#cardPile { 
width: 910px; 
    height: 55px; 
    padding: 20px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
} 
/* Individual cards and slots */ 

#cardSlots div, #cardPile div { 
    float: left; 
    width: 195px; 
    height: 20px; 
    padding: 10px; 
    padding-top: 10px; 
    padding-bottom: 20px; 
    border: 2px solid #999; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    margin: 0 0 0 10px; 
    background: #fff; 
} 

#cardSlots div:first-child, #cardPile div:first-child { 
    margin-left: 0; 
} 

#cardSlots div.hovered { 
    background: #aaa; 
} 

#cardSlots div { 
    border-style: dashed; 
} 

#cardPile div { 
    background: #009; 
    color: #fff; 
    font-size: 20px; 
    text-shadow: 0 0 3px #000; 
} 

#cardPile div.ui-draggable-dragging { 
    -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8); 
    -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8); 
    box-shadow: 0 0 .5em rgba(0, 0, 0, .8); 
} 

Javascript

$(document).ready(function(){  

$(init); 

function init() { 
    // Create the pile of shuffled cards 
    { 
    $('#cardPile div').draggable({ 
     containment: '#content', 
     stack: '#cardPile div', 
     cursor: 'move', 
     revert: true 
    }); 
    } 

    // Create the card slots 
    { 
    $('#cardSlots div').droppable({ 
     accept: '#cardPile div', 
     hoverClass: 'hovered', 
     drop: handleCardDrop 
    }); 



    } 

function handleCardDrop(event, ui) { 
    var slotNumber = $(this); 
    var cardNumber = ui.draggable; 

    if (cardNumber1 == cardNumber1) { 
     ui.draggable.addClass ('correct'); 
     ui.draggable.position({of: $(this), my: 'left top', at: 'left top' }); 
     ui.draggable.draggable('option', 'revert', false); 
    } 
} 

} 



}); 

Answer 1

Посмотрите на это: working demo

$(document).ready(function() { 

$(init); 

function init() { 

    $('#cardSlots').sortable({placeholder: "ui-state-highlight"}); 
    // Create the pile of shuffled cards 
    { 
     $('#cardPile div').draggable({ 
      containment: '#content', 
      stack: '#cardPile div', 
      cursor: 'move', 
      connectToSortable: '#cardSlots' 

     }); 
    } 

    // Create the card slots 
    { 
     $('#cardSlots').droppable({ 
      accept: '#cardPile', 
      hoverClass: 'hovered', 
      drop: handleCardDrop 

     });} 

    function handleCardDrop(event, ui) { 
     var slotNumber = $(this); 
     var cardNumber = ui.draggable; 

     if (cardNumber1 == cardNumber1) { 
      ui.draggable.addClass('correct'); 
      ui.draggable.position({ 
       of: $(this), 
       my: 'left top', 
       at: 'left top' 
      }); 

      ui.draggable.draggable('option', 'revert', false); 

     } 

    } 

} 
});