如何風格下降

之前jQuery的排序目標列表使用jQuery的排序，我可以風格connectWith選項中定義一個瞬移列表佔位符的，所以我能看到的內容將被丟棄。但是我不能找到一種方法，風格，包含佔位符列表。如何風格下降

我的代碼：

HTML：

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

的Javascript：

$(".sortable").sortable({ 
    connectWith: ".sortable", 
    over: function(event,ui){ 
     //add class .hover to list 
    }, 
    change: function(event, ui) { 
     //style placeholder 
     ui.placeholder.css({ 
      visibility: 'visible', 
      background: '#EEE' 
     }); 
    } 
});

Demo here

來源

2016-01-20 quakeglen

您是否解決了您的問題？ – Alteyss

仍然在最小化的代碼上工作，真的需要addClass函數嗎？ – quakeglen

不是。這是一種通氣代碼的方法:) – Alteyss

基於Alteyss的答案我已經加入對事件進行了新的生產線過來，停下了風格的物品父母：

$(".sortable").sortable({ 
    connectWith: ".sortable", 
    stop: function(event,ui){ 
     $('.sortable').removeClass('hover'); 
    }, 
    over: function(event,ui){ 
     //will add class .hover to list 
     $('.ui-sortable-placeholder').parents('.sortable').addClass('hover'); 
    }, 
    out: function(event,ui){ 
     $('.ui-sortable-placeholder').parents('.sortable').removeClass('hover'); 
    }, 
    change: function(event, ui) { 
     //will style placeholder 
     $('.ui-sortable-placeholder').css({ 
      visibility: 'visible', 
      background: '#EEE' 
     }); 
    } 
});

New Demo

來源

2016-01-20 17:04:40 quakeglen

一種其他的方式來改變placeholder風格：

看你有相關的佔位符類（當你拖動你的盒子）標籤：

ui-sortable-placeholder

所以做一個類，將覆蓋預設：

.ui-sortable-placeholder 
{ 
    //Style 
}

編輯：應用懸停類

創建一個函數來處理jQuery中的hover類，並將其調用到事件參數中：

// Your function 
    var addClass = function (jQueryElement, add) { 
     // Add or remove your class according to the boolean 
     if (add) { 
      //Add class with : addClass from jQuery 
      $(jQueryElement).addClass("hover"); 
     } 
     else { 
      //Remove class with : removeClass from jQuery 
      $(jQueryElement).removeClass("hover"); 
     } 
    } 

    // Plugin use 
    $(".sortable").sortable({ 
     connectWith: ".sortable", 
     // This event is triggered when a sortable item is moved into a sortable list. 
     over: function(event,ui){ 
      var elementsToChange = $(".ui-sortable-placeholder").parents(".sortable"); 
      addClass(elementsToChange, true); 
     }, 
     // This event is triggered when a sortable item is moved away from a sortable list. 
     out: function(event,ui){ 
      var elementsToChange = $(".ui-sortable-placeholder").parents(".sortable"); 
      addClass(elementsToChange, false); 
     }, 
     // This event is triggered when sorting has stopped. 
     stop: function(event,ui){ 
      addClass(".sortable", false); 
     }, 
     change: function(event, ui) { 
      //style placeholder 
      ui.placeholder.css({ 
       visibility: 'visible', 
       background: '#EEE' 
      }); 
     } 
    });

Beautiful Fiddle!

對於其他活動，享受DOC：http://api.jqueryui.com/sortable/

來源

2016-01-20 16:21:25 Alteyss

年僅風格佔位 – quakeglen

的確！我做了修改，希望它會有用。 – Alteyss

如何風格下降

回答

相關問題