Drag and drop Verbs Regular

by Raul Corona Xolaltenco

HTML

<div class="fullWidth greyBg padd44">
    <div class="wrapper arrowBG">
        <div class="mainWrap">
            
<h1>10 principles of Risk Management</h1>

            <div id="tableWrap">
                <div class="rowWrap rowSelected">
                    <div class="rowLeft">1</div>
                    <div class="rowMid"><span class="text">Take on the right </span><span class="wordBg word6 snapTarget snap6"></span>
                    </div>
                    <div class="rowRight"><span class="tick hide">Tick</span>
                    </div>
                </div>
                <!--rowWrap close-->
                <div class="rowWrap">
                    <div class="rowLeft">2</div>
                    <div class="rowMid"><span class="text">Choose the right </span><span class="wordBg word13 snapTarget snap13"></span>
                    </div>
                    <div class="rowRight"><span class="tick hide">Tick</span>
                    </div>
                </div>
                <!--rowWrap close-->
                <div class="rowWrap">
                    <div class="rowLeft">3</div>
                    <div class="rowMid"><span class="text">Use </span><span class="wordBg word12 snapTarget snap12"></span><span class="text">or </span><span class="wordBg word11 snapTarget snap11"></span><span class="text">agreements</span>
                    </div>
                    <div class="rowRight"><span class="tick hide">Tick</span>
                    </div>
                </div>
                <!--rowWrap close-->
                <div class="rowWrap">
                    <div class="rowLeft">4</div>
                    <div class="rowMid"><span class="text">Maintain </span><span class="wordBg word4 snapTarget snap4"></span><span class="text">and</span><span class="wordBg word1 snapTarget snap1"></span>
                    </div>
                    <div class="rowRight"><span class="tick hide">Tick</span>
                    </div>
               ...

CSS

@charset"utf-8";

/* CSS Document */
 body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: #6d6e71;
}
h1 {
    font-size: 24px;
    font-weight: bold;
    padding: 0 0 20px 0;
    margin: 0;
}
h6 {
    font-size: 14px;
    padding: 0;
    margin: 0;
}
.fullWidth {
    width: 100%;
    float: left;
    margin: 0;
    padding: 0;
}
.padd44 {
    padding: 0 0 44px 0;
}
.wrapper {
    width: 980px;
    margin: 0 auto 0 auto;
    padding: 0;
    overflow: hidden;
    position: relative;
}

.mainWrap {
    width: 530px;
    float: left;
    margin-left: 0px;
    padding: 34px 0 0 0;
}
#tableWrap {
    width: 530px;
    float: left;
    background-color: #ffd503;
}
.colRight {
    float: left;
    margin: 0;
    padding: 0;
    width: 280px;
    position: relative;
}
.rowWrap, .rowLeft, .rowMid, .rowRight {
    height: 44px;
    float: left;
}
.rowWrap {
    width: 530px;
    background-color: #c0c0c0;
    color: #FFF;
    margin-bottom: 1px;
}
.mainWrap .rowWrap:last-child {
    margin-bottom: 0;
}
.rowLeft {
    width: 46px;
    font-size: 18px;
    line-height: 44px;
    text-align: center;
}
.rowMid {
    width: 438px;
    font-size: 18px;
    line-height: 44px;
}
.rowRight {
    width: 46px;
    background-color: #FFF;
    background-image: url(../images/tickBox.png);
    background-repeat: no-repeat;
    position: relative;
}
.rowSelected {
    background-color: #ffd503;
    color: #6d6e71;
}
.text {
    height: 44px;
    display: inline-block;
    float: left;
}
.wordBg {
    height: 34px;
    display: inline-block;
    margin: 5px 10px 5px 10px;
    padding: 0;
    float: left;
    background-color: #cfcfcf;
    line-height: 34px;
}
.greyBg {
    background-color: #f0f0f0;
}
.rowSelected .wordBg {
    color: #fff;
}
.footer {
    padding: 44px 0 44px 0;
}
.footer h6 {
    padding-left: 170px;
}
.tick {
    position: absolute;
    text-indent: -500px;
    overflow: hidden;
    top: -3px;
    left: 0;
   ...

JavaScript

$(function () {
    
     $(".draggable").draggable({
        snap: ".snapTarget",
        snapMode: "inner",
        snapTolerance: 20,
        revert: "invalid"
    });  
    
    $(".word6 .wordBg").draggable({
        snapTolerance: 20,
	    revert: "invalid",
	});
    $(".word6").droppable({
		accept: ".word6"
    });
    
    
});