：焦點jQuery的

Question

爲什麼這不是工作，我怎麼這樣做正確

if ($('#ch03').is(':focus')) { 
    $('this').attr("aria-grabbed","true"); 
} else { 
    $('this').attr("aria-grabbed","false"); 
} 

或基於現有的SO解決方案，我不能去上班

var inFocus = false; 
$('#ch03').focus(function() { 
    $('#ch03').attr("aria-grabbed","true"); 
}); 

$('#ch03').blur(function() { 
    $('#ch03').attr("aria-grabbed","false"); 
}); 

HTML

<div id="activity_contents"> 
<div id="columns" class="clearfix"> 
<div id="col_1" class="column"> 
<div class="column_head">Section A</div> 
    <ul id="tier1" class="connected" role="region" aria-labelledby="col_1" aria-dropeffect="move"> 
    </ul> 
<div class="clearfix"></div> 
</div> 
<div id="col_2" class="column"> 
<div class="column_head">Section B</div> 
    <ul id="tier2" class="connected" role="region" aria-labelledby="col_2" aria-dropeffect="move"> 
    </ul> 
</div> 
<div id="col_3" class="column"> 
<div class="column_head">Section C</div> 
    <ul id="tier3" class="connected" role="region" aria-labelledby="col_3" aria- dropeffect="move"> 
    </ul> 
</div> 
<div id="col_4" class="column last"> 
<div class="column_head">Section D </div> 
    <ul id="tier4" class="connected" role="region" aria-labelledby="col_4" aria-dropeffect="move"> 
    </ul> 
</div> 
</div> 
<div id="well" class="clearfix"> 
    <ul id="choices" class="connected" aria-labelledby="well" role="region"> 
    <li id="ch01" class="choice"><a href="#">Drag item 1</a></li> 
    <li id="ch03" class="choice"><a href="#">Drag item 2</a></li> 
    <li id="ch04" class="choice"><a href="#">Drag item 3</a></li> 
    <li id="ch02" class="choice"><a href="#">Drag item 4</a></li> 
    </ul> 
</div> 
</div> 

感謝您對此問題的任何幫助。代碼來自jQueriUI dragnDrop/Sortable。我試圖實現的是通過動態添加aria角色來使這更容易訪問。

Answer 1

選項1：依靠DOM上的click事件檢查元素是否具有焦點，然後設置屬性aria-grabbed的值。

$(document).on("click",function(){ 
    $("#ch03").attr("aria-grabbed",$("#ch03").is(':focus')); 
}); 

實施例：https://jsfiddle.net/DinoMyte/2oygeh0w

選項2：只需觸發元件上的focus和blur事件來設置屬性 'aria-grabbed' 值。

$("#ch03").on("focus",function(){ 
     $(this).attr("aria-grabbed",true); 
    }).on("blur",function() 
    { 
     $(this).attr("aria-grabbed",false); 
    });; 

例子：https://jsfiddle.net/DinoMyte/2oygeh0w/1/

UPDATE：根據您發佈，如果你試圖設置屬性「詠歎調，抓住」對每個重點裏的HTML。

$('#choices li a').on("focus",function(e) 
{ 
    $(this).closest('li').attr("aria-grabbed",true); 
    $(this).addClass("selected"); 

}).on("blur",function(e) 
{ 
     $(this).closest('li').attr("aria-grabbed",false); 
     $(this).removeClass("selected"); 
}); 

例子：https://jsfiddle.net/DinoMyte/2oygeh0w/3/

Answer 2

使用DinoMyte的方法，並從sitepoint網站 http://www.sitepoint.com/accessible-drag-drop/

/***** 測試一些代碼

****/

//get the collection of draggable targets and add their draggable attribute 
for(var 
    targets = document.querySelectorAll('[data-draggable="target"]'), 
    len = targets.length, 
    i = 0; i < len; i ++) 
{ 
    targets[i].setAttribute('aria-dropeffect', 'none'); 
} 

//get the collection of draggable items and add their draggable attributes 
for(var 
    items = document.querySelectorAll('[data-draggable="item"]'), 
    len = items.length, 
    i = 0; i < len; i ++) 
{ 
    items[i].setAttribute('draggable', 'true'); 
    items[i].setAttribute('aria-grabbed', 'false'); 
    items[i].setAttribute('tabindex', '0'); 
} 
//Place some dynamic aria roles for accessibility 
$("#ch01").on("focus",function(){ 
    $(this).attr("aria-grabbed",true); 
}).on("blur",function() 
{ 
    $(this).attr("aria-grabbed",false); 
}); 
$("#ch02").on("focus",function(){ 
    $(this).attr("aria-grabbed",true); 
}).on("blur",function() 
{ 
    $(this).attr("aria-grabbed",false); 
}); 
$("#ch03").on("focus",function(){ 
    $(this).attr("aria-grabbed",true); 
}).on("blur",function() 
{ 
    $(this).attr("aria-grabbed",false); 
}); 
$("#ch04").on("focus",function(){ 
    $(this).attr("aria-grabbed",true); 
}).on("blur",function() 
{ 
    $(this).attr("aria-grabbed",false); 
}); 

//end 

仍然需要清理，但這個想法有效。一次一步，我會在你的幫助下到達那裏:-)