.panelc { width:25%; } .valign { vertical-align:top; } .dropTargetPanel { width: 90%; } .footerClass { text-align: center; padding-top: 5px; } .default { font-size:11px; cursor:pointer; width:100px; border:1px solid gray; padding:2px } .rf-ind-drag.default { padding-left:30px; background-image: url("#{facesContext.externalContext.requestContextPath}/images/dnd/default.gif"); background-position: 5px; background-repeat: no-repeat; } .rf-ind-drag.accept { background-image: url("#{facesContext.externalContext.requestContextPath}/images/dnd/accept.gif"); background-position: 5px; background-repeat: no-repeat; border:2px solid green } .rf-ind-drag.reject { border:2px solid red; background-image: url("#{facesContext.externalContext.requestContextPath}/images/dnd/reject.gif"); background-position: 5px; background-repeat: no-repeat; } Drag the item to proper area..