僅突出顯示懸空的物品或丟棄的物品

我想要做的是將邊框顏色設置爲藍色.droparea包含.item元素的元素。僅突出顯示懸空的物品或丟棄的物品

此外，還有一個.droparea的懸停效果，它將邊框顏色更改爲藍色。

所以，如果我的.item元素移動到另一個.droparea它應該自動改變邊框顏色爲當前.droparea藍色和更改邊框以前使用.droparea到默認的顏色（黑色）。

$(document).ready(function() { 
 
    $(".item").draggable({ 
 
    scroll: false, 
 
    revert: 'invalid', 
 
    stack: false, 
 
    create: function() { 
 
     $(this).data('position', $(this).position()) 
 
    }, 
 
    cursor: "pointer", 
 
    start: function() { 
 
     $(this).stop(true, true) 
 
    }, 
 
    drag: function(event, ui) { 
 
     $(".droparea").removeClass("highlight"); 
 
    } 
 
    }); 
 
    $(".droparea").droppable({ 
 
    accept: ".item", 
 
    drop: function(event, ui) { 
 
     $(this).addClass("highlight").find("p"); 
 
     snapToMiddle(ui.draggable, $(this)); 
 
    } 
 
    }); 
 
}); 
 

 
function snapToMiddle(dragger, target) { 
 
    var topMove = target.position().top - dragger.data('position').top + (target.outerHeight(true) - dragger.outerHeight(true))/2; 
 
    var leftMove = target.position().left - dragger.data('position').left + (target.outerWidth(true) - dragger.outerWidth(true))/2; 
 
    dragger.animate({ 
 
    top: topMove, 
 
    left: leftMove 
 
    }, { 
 
    duration: 200, 
 
    easing: 'linear' 
 
    }); 
 
}

.item { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid red; 
 
} 
 
.droparea { 
 
    width: 150px; 
 
    height: 150px; 
 
    float: left; 
 
    margin: 2px; 
 
    border: 1px solid #000; 
 
    outline: 1px solid transparent 
 
} 
 
.highlight { 
 
    border: 1px solid blue 
 
} 
 
.droparea:hover { 
 
    border: 1px solid blue 
 
}

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script> 
 

 
<div class="droparea"> 
 
    <div class="item"></div> 
 
</div> 
 

 

 
<div class="droparea"></div> 
 
<div class="droparea"></div>

來源

2014-10-28 Wracker

幾點注意這裏：

jQuery UI的可拖動只調整元素的風格，它不會改變DOM其位置，所以.item永遠會成爲第一個可拖動的孩子，並且由於您指定了CSS :hover僞選擇器 - .droparea:hover，因此您將始終在拖動時將鼠標懸停在第一個可拖動對象上你徘徊它的孩子。
我們可以使用可拖動的hoverClass選項設置懸停時的highlight類，但由於您在drag事件期間刪除highlight，因此懸停時設置的類將立即刪除。所以我們不應該通過拖動來移除課程。
最後，您可以使用jQuery UI的position()實用程序方法中心對齊放置項目。

所以，你可以實現你想爲以下內容：

$(document).ready(function() { 
 
    $(".item").draggable({ 
 
    scroll: false, 
 
    revert: 'invalid', 
 
    stack: false, 
 
    cursor: "pointer", 
 
    }); 
 
    $(".droparea").droppable({ 
 
    accept: ".item", 
 
    hoverClass: "highlight", 
 
    drop: function(event, ui) { 
 
     var $this = $(this); 
 
     $(".highlight").removeClass("highlight"); 
 
     $this.addClass("highlight"); 
 
     ui.draggable.position({ 
 
     my: "center", 
 
     at: "center", 
 
     of: $this, 
 
     using: function(pos) { 
 
      $(this).animate(pos, 200, "linear"); 
 
     } 
 
     }); 
 
    } 
 
    }); 
 
});

.item { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid red; 
 
} 
 
.droparea { 
 
    width: 150px; 
 
    height: 150px; 
 
    float: left; 
 
    margin: 2px; 
 
    border: 1px solid #000; 
 
    outline: 1px solid transparent 
 
} 
 
.highlight { 
 
    border: 1px solid blue 
 
}

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script> 
 

 
<div class="droparea"> 
 
    <div class="item"></div> 
 
</div> 
 

 
<div class="droparea"></div> 
 
<div class="droparea"></div>

此外，我要提醒你，jQuery UI的和CSS的float有一個糟糕的歷史，這是顯而易見的，如果您訪問bugs.jqueryui.com。爲此，您最好使用display:inline-block，您甚至可以手動避免指定邊距。

來源

2014-10-28 16:57:10

僅突出顯示懸空的物品或丟棄的物品

回答

相關問題