jquery可拖拽可排序

Question

我试图让它能够让我把所有的单词放在底部的瓷砖中，然后我可以在“最喜欢我就像我一样”的可丢弃区域之间进行排序。现在，我可以将它们拖放到不同的盒子中，但是它将在一个可放置区域中放置两个可拖动的对象。我希望它可以将其他可拖动的框架推出，并且不允许两个可拖动框架位于同一个可拖放区域，同时仍然允许用户在犯错或想要诉诸它们时改变主意。请看以下代码：

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); 

     } 

    } 

} 
});