javascript selectbox up down 

jquery 이용해서 처리

<!DOCTYPE>

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

  <script>


if(!console){

var console = {

log:function (){

var log  = new Array();

for (var key in arguments){

log.push(arguments[key]+'\n');

}

var l = $('#consolelog');

if(l.length !=0 ){

$('#consolelog').val(log.join(''));

}else{

alert(log.join(''))

}

}

}

}


$(document).ready(function (){

fnInit();

})


function fnInit(){


}



function userPortletMove(type){

var selector = '#selecboxMove';

var selectObj = $(selector);


if(!selectObj.val()) return ; 


var selectLen = selectObj.val().length; 

if( selectLen < 1 ) return ; 

if(type=='up'){

var selectIdx = $(selector+" option").index($(selector+" option:selected"));


if(selectIdx==0) return ; 


var beforeObj = $(selector+" option:eq("+(selectIdx-1)+")"); 

var innerObj = beforeObj.clone().wrapAll('<div/>').parent().html();

beforeObj.remove();

$(selector+' option:eq('+(selectIdx+selectLen-2)+')').after(innerObj);

}else{

var selectIdx = $(selector+" option").index($(selector+" option:selected"));

if(selectIdx+selectLen==$(selector).children().length) return ; 


var nextObj = $(selector+" option:eq("+(selectIdx+selectLen)+")"); 

var innerObj = nextObj.clone().wrapAll('<div/>').parent().html();

nextObj.remove();


$(selector+' option:eq('+(selectIdx)+')').before(innerObj);

}

}

  </script>

 </HEAD>


 <BODY>

<div class="panel-body">

<select id="selecboxMove" class="select100per" size="10" style="width:100px;" multiple="">

<option value="aa">aaa</option>

<option value="bb">bbb</option>

<option value="cc">ccc</option>

<option value="dd">ddd</option>

</select>

<div>

<span class="pull-right">

<button type="button" onclick="userPortletMove('up')" class="btn btn-info portlet-up-btn">위</button>

&nbsp;&nbsp;&nbsp;

<button type="button" onclick="userPortletMove('down')" class="btn btn-info portlet-down-btn">아래</button>

</span>

</div>

</div>


   <textarea id="consolelog" style="width:100%" rows="3"></textarea>

 </BODY>

</HTML>



테스트 html

jqueryTest.html


ie9에서 아래와 같이 label태그 안에 button을 여러개 넣고 동적으로 이벤트를 

등록하면 이벤트가 중복해서 발생하는 에러가 나타난다. 

 <label>

<button type="button" class="btn btn-xs btn-primary btnAcceptYN" value="3">First</button>

<button type="button" class="btn btn-xs btn-primary btnAcceptYN" value="2">Second</button>

<button type="button" class="btn btn-xs btn-primary btnAcceptYN" value="1">Third</button>

 </label>

 

---해결방안 :  버튼을 label에 따로따로 넣어서 사용하면된다. 

<label>

<button type="button" class="btn btn-xs btn-primary btnAcceptYN" value="3">First</button>

</label

<label>

<button type="button" class="btn btn-xs btn-primary btnAcceptYN" value="3">First</button>

</label>

jquery.ui.sortable.zip


 jquery sortable 위치 버그 수정(jquery sortable position bug modify) 수정. 

버전이 변경된경우 아래 부분만 변경하면 자동으로 적용됨.

_intersectsWithPointer: function(item) {


//ytkim modify start

if(this.dragAreaItem == item.item[0]){

//console.log('111111111111111', item.item[0].innerText)

return false;

}

var tmpPositionAbs =this.positionAbs

,ratio=3

,thisT = tmpPositionAbs.top

,thisH=this.currentItem[0].clientHeight

,thisL = tmpPositionAbs.left

,thisW=this.currentItem[0].clientWidth

,itemT = item.top

,itemH=item.height

,itemL = item.left

,itemW= item.width

,verticalDirection = this._getDragVerticalDirection() 

,horizontalDirection = this._getDragHorizontalDirection()

,isOverElementHeight = this._getIntersectsWithPointerAndSides(thisT,thisH, itemT, itemH, ratio)

,isOverElementWidth = this._getIntersectsWithPointerAndSides(thisL,thisW, itemL, itemW, ratio);

if(!(isOverElementHeight && isOverElementWidth)) return false;


this.dragAreaItem =  item.item[0]; 

tmpH = horizontalDirection;

//가로 영역 위치값 잡기. 

if( $(item.item[0]).prev()[0] ==this.placeholder[0]  && this.floating){

horizontalDirection = 'right';

verticalDirection = 'down';

}else if($($(item.item[0]).next()).next()[0] ==this.placeholder[0] && this.floating){

horizontalDirection = 'left';

verticalDirection = 'up';

}else if(!(!verticalDirection  && horizontalDirection=='right')){

horizontalDirection=thisL > itemL ? ( thisL <= (itemL+itemW/ratio)?'left':'right') : ( (thisL+thisW)>(itemL+(itemW-itemW/ratio))?'left':'right');

}


if(!this.floatingCheckFlag){

if(!this.floating ){

var o = this.options;

this.floating = this.items.length ? o.axis === 'x' || (/left|right/).test(this.items[0].item.css('float')) || (/inline|table-cell/).test(this.items[0].item.css('display')) : false;

this.floatingCheckFlag = true;

}

}

//ytkim modify end

return this.floating ?

( ((horizontalDirection && horizontalDirection == "right") || verticalDirection == "down") ? 2 : 1 )

: ( verticalDirection && (verticalDirection == "down" ? 2 : 1) );

},

//ytkim modify start

// 드래그 영역 넘었는지 여부 체크.

_getIntersectsWithPointerAndSides: function (aPosi, aSize, bPosi, bSize, ratio){

return (aPosi > bPosi ? (aPosi - (bPosi+bSize/ratio)) : ((bPosi+(bSize- bSize/ratio)) - (aPosi+aSize))) <=0 ? true:false;

},

//ytkim modify end


_intersectsWithSides: function(item) {

//ytkim modify start

return true;

//ytkim modify end

},

javascript  트리 

트리 1000 개 까지는 괜찮게 보여짐. 

https://code.google.com/p/yttree/downloads/list

위에 주소에서 다운 받아 사용할수 있음. 

ytTreeAllSource.zip


+ Recent posts

티스토리툴바