Interface utilisateur jQuery triable/déplaçable - avec palette (copier/supprimer au lieu de déplacer)

J'ai une configuration simple en utilisant la fonctionnalité sortable/draggable par défaut de jQuery UI.Interface utilisateur jQuery triable/déplaçable - avec palette (copier/supprimer au lieu de déplacer)

J'ai maintenant besoin d'ajouter une 'palette' qui sera une liste de tous les éléments de toutes les listes (et d'autres qui ne figurent dans aucune liste). Comme ceci:

<ul id="palette" class="ui-sortable"> 
<li class="used">A</li> 
<li>B</li> 
<li class="used">C</li> 
<li class="used">D</li> 
<li>E</li> 
<li>F</li> 
</ul> 

<ol id="box1" class="ui-sortable box"> 
<li>A</li> 
<li>D</li> 
</ol> 

<ol id="box2" class="ui-sortable box"> 
</ol> 

<ol id="box3" class="ui-sortable box"> 
<li>C</li> 
</ol>

Pour l'instant, la palette ne fait rien de différent - faire glisser les éléments dans et hors les déplace simplement.

La fonctionnalité dont j'ai besoin est que lorsque je fais glisser hors de la palette, il copie plutôt que de bouger, et lorsque je glisse dans la palette, il disparaît de la liste source mais ne l'ajoute pas à la palette. (Les boîtes peuvent stocker plusieurs copies d'éléments de palette.)

J'ai utilisé l'événement receive du sortable pour créer quelque chose qui fait tout cela - et j'ai ajouté cela comme une réponse ci-dessous - mais Je veux des choses qui ma solution existante ne fournit pas:

chasse gardée (visuellement, au moins) l'élément dans la palette du début de traînée (plutôt que de le restaurer après la chute).
persiste l'ordre d'origine de la palette, empêchant la triabilité (mais préservant la possibilité de se connecter avec des boîtes).

Quelqu'un peut-il suggérer la meilleure façon de les implémenter?

Source

2009-11-21 Peter Boughton

Voici ma solution actuelle:

<!DOCTYPE html> 

<title>jQuery UI Sortable/Palette test</title> 

<style> 
    *{margin:0;padding:0;} 

    ul,ol 
    {list-style: none;} 

    #palette 
    { 
    display: block; 
    width: 114px; 
    margin: 5px; 

    float:left;clear:none; 

    background: yellow; 
    } 

    .box 
    { 
    display:block; 
    width: 114px; 
    min-height: 5em; 
    margin: 5px; 

    float: left; clear:none; 

    background:silver; 
    } 

    .box li,#palette li 
    { 
    display: block; 
    width: 32px; 
    height: 32px; 
    margin: 2px; 

    float: left; clear:none; 

    text-align: center; 
    border: solid 1px black; 
    } 

    #palette li{font-weight:bold} 
    #palette li.used{font-weight:normal} 

    #palette .ui-sortable-placeholder 
    { 
    display:none; 
    } 

</style> 

<script src="jquery-1.3.2.min.js"></script> 
<script src="jquery-ui-1.7.2.custom.min.js"></script> 

<script> 
    $j = jQuery.noConflict(); 

    $j(document).ready(init); 

    function init() 
    { 
    var SortParams = 
    { connectWith:'.box,#palette' 
    , dropOnEmpty:true 
    , receive: doPaletteMagic 
    } 

    $j('.box,#palette').sortable(SortParams) 
    } 

    function doPaletteMagic(event , ui) 
    { 
    if (ui.sender.is('#palette')) 
    { 
    ui.item 
    .clone() 
    .addClass('used') 
    .appendTo('#palette') 

    // TODO: fix #palette ordering 
    } 
    else 
    if (ui.item.parent().is('#palette')) 
    { 
    var ItemContent = ui.item.text(); 

    ui.item.remove() 

    if (! isUsed(ItemContent)) 
    { 
    $j('#palette li:contains('+ItemContent+')') 
     .removeClass('used') 
     ; 
    } 

    } 
    } 

    function isUsed(Content) 
    { 
    return ($j('.box li:contains('+Content+')').length > 0) 
    } 

</script> 

<body> 

<ul id="palette" class="ui-sortable"> 
    <li class="used">A</li> 
    <li>B</li> 
    <li class="used">C</li> 
    <li class="used">D</li> 
    <li>E</li> 
    <li>F</li> 
</ul> 

<ol id="box1" class="ui-sortable box"> 
    <li>A</li> 
    <li>D</li> 
</ol> 

<ol id="box2" class="ui-sortable box"> 
</ol> 

<ol id="box3" class="ui-sortable box"> 
    <li>C</li> 
</ol> 

<br class="break"/> 

</html>

Source

2009-11-21 15:36:29

chasse gardée (visuellement, au moins) l'élément dans la palette du début de traînée (plutôt que de le restaurer après la chute).

Je suppose que vous avez déjà essayé de définir l'aide triable de la palette sur 'cloner'?

var SortParams = { 
    ..., 
    helper: "clone", 
}

Source

2009-12-15 16:32:40 RobM

Interface utilisateur jQuery triable/déplaçable - avec palette (copier/supprimer au lieu de déplacer)

Répondre

Questions connexes