Bu kullanıcı arabirimi ara yüzünü nasıl değiştirebilirim Semantically

Question

Kullanıcıların etiketleri etrafında taşıyabileceği bir şey yapmak istiyorum ve kullanıcı etiketler arasında yeni etiketler ekleyebilir.

Kullanıcı, daha fazla etiket eklemek için iki etiket arasında tıklarsa, imleç görünür.

the first bit to work elde edebildi.

 

$(document).ready(function() { 
    $('.ui.dropdown').dropdown({ 
     onChange: function (value, text, $selectedItem) { 
      console.log(value); 
     }, 
     forceSelection: false, 
     selectOnKeydown: false, 
     showOnFocus: false, 
     on: "hover" 
    }); 
}); 

$('#clearValues').click(function() { 
    $('.ui.dropdown').dropdown("clear"); 
}); 

$('#setValues').click(function() { 
    $('.ui.dropdown').dropdown("set selected", [ 
     "angular", "css", "design", "ember", "html", "ia", "javascript", 
     "mech", "meteor", "node", "plumbing", "python", "rails", "react", 
     "repair", "ruby", "ui", "ux" 
    ]); 
}); 
$(".sortable").sortable({ 
    revert: true 
}); 

<input type="button" id="setValues" value="Set Values" /> 
<input type="button" id="clearValues" value="Clear Values" /> 

<div class="ui fluid selection search dropdown multiple sortable"> 
    <input name="tags" type="hidden"> 

    <div class="default text">Select</div> 
    <i class="dropdown icon"></i> 
    <div class="menu"> 
    <div class="item" data-value="angular">Angular</div> 
    <div class="item" data-value="css">CSS</div> 
    <div class="item" data-value="design">Graphic Design</div> 
    <div class="item" data-value="ember">Ember</div> 
    <div class="item" data-value="html">HTML</div> 
    <div class="item" data-value="ia">Information Architecture</div> 
    <div class="item" data-value="javascript">Javascript</div> 
    <div class="item" data-value="mech">Mechanical Engineering</div> 
    <div class="item" data-value="meteor">Meteor</div> 
    <div class="item" data-value="node">NodeJS</div> 
    <div class="item" data-value="plumbing">Plumbing</div> 
    <div class="item" data-value="python">Python</div> 
    <div class="item" data-value="rails">Rails</div> 
    <div class="item" data-value="react">React</div> 
    <div class="item" data-value="repair">Kitchen Repair</div> 
    <div class="item" data-value="ruby">Ruby</div> 
    <div class="item" data-value="ui">UI Design</div> 
    <div class="item" data-value="ux">User Experience</div> 
    </div> 
</div> 

Ancak, ben gerisini tamamlamak mümkün değildi.

Aşağıdaki resimde tam olarak aynı şeyi istiyorum.

Answer 1

Değişim bu şekilde belge hazır.

$(document).ready(function() { 
    $('.ui.dropdown').dropdown({ 
     onChange: function (value, text, $selectedItem) { 
      console.log(value); 
     }, 
     on: "hover" 
    }); 
});