jquery droppable元素与网格对齐

时间：2016-04-09 10:40:27

标签： javascript jquery

我正在尝试制作一个页面，可以选择任何一种陶瓷类型并构建他的墙， 你能帮我吗？我怎么能让可丢弃的元素自动对齐 我用： http://code.jquery.com/jquery-1.9.1.js http://code.jquery.com/jquery-ui.js

这是代码：

var x = null;
//Make element draggable
$(".drag").draggable({
    helper: 'clone',
    cursor: 'move',
    tolerance: 'fit',
    revert: true
});

$("#droppable").droppable({
    accept: '.drag',
    activeClass: "drop-area",
    drop: function (e, ui) {
        if ($(ui.draggable)[0].id != "") {


            x = ui.helper.clone();
            ui.helper.remove();
            x.draggable({
                helper: 'original',
                cursor: 'move',
                //containment: '#droppable',
                tolerance: 'fit',
                drop: function (event, ui) {
                    $(ui.draggable).remove();
                }
            });
			
			

            x.resizable({
                maxHeight: $('#droppable').height(),
                maxWidth: $('#droppable').width()
            });
            x.addClass('remove');
            var el = $("<span><a href='Javascript:void(0)' class=\"xicon delete\" title=\"Remove\">X</a></span>");
            $(el).insertAfter($(x.find('img')));
            x.appendTo('#droppable');
            $('.delete').on('click', function () {
                $(this).parent().parent('span').remove();
            });
            $('.delete').parent().parent('span').dblclick(function () {
                $(this).remove();
            });
        }
    }
});

$("#remove-drag").droppable({
    drop: function (event, ui) {
        $(ui.draggable).remove();
    },
    hoverClass: "remove-drag-hover",
    accept: '.remove'
});
  .col {
      float: left;
      padding: 5px 5px 5px 5px;
      margin: 5px 5px 5px 5px;
  }
  #col1 {
      width: 200px;
      height: auto;
      border: 1px solid black;
  }
  img.drag {
      width: 40px;
      height: 40px;
      position: relative;
  }
  #droppable {
      width: 350px;
      height: 340px;
      border: 1px solid black;
  }
  .right {
      float: right;
  }
  .left {
      float: left;
  }
  .clear {
      clear: both;
  }
  ul li {
      list-style: none;
  }
  .drag-list img {
      width: 80px;
      vertical-align: middle;
      cursor: move;
  }
  .drag-list ul {
      margin: 0px;
      padding: 0px;
  }
  .drag-list li {
      margin-bottom: 5px;
  }
  .remove-drag-hover {
      background-color: #ED4949 !important;
  }
  .drop-area {
      background-color: #afd1b2;
  }
  .xicon {
      margin-top: 4px;
      position: absolute;
      margin-left: -17px;
      color: #FFF;
      font: message-box;
      text-decoration: none;
  }
  .xicon:hover {
      background-color: #fff;
      color: #000;
      width: 13px;
      height: 20px;
      text-align: center;
  }
  .tip {
      font-size: 12px;
      clear: both;
  }
<div id="wrapper">
    <div class="col" id="droppable"></div>
    <div class="col" id="col1">
        <div id="drag-list" class="drag-list">
            <ul>
                <li><span id="drag1" class="drag">
                        <img src="http://placehold.it/80x80/c9112d/fff&text=1" width="100%" height="100%" />
                    </span><span>Item 1</span> 
                </li>
                <li><span id="drag2" class="drag">
                        <img src="http://placehold.it/80x80/E68500/fff&text=2" width="100%" height="100%" />
                    </span><span>Item 2</span> 
                </li>
                <li><span id="drag3" class="drag">
                        <img src="http://placehold.it/80x80/00810C/fff&text=3" width="100%" height="100%" />
                    </span><span>Item 3</span> 
                </li>
                <li>
                    <div id="remove-drag" style="width: 100%; height: 80px; background-color: #FF8B8B;">
                        <div style="color: #fff; font-size: 20px; text-align: center; padding-top: 20px;">Remove
                            <div class="tip">Drop here</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分：0)

它看起来我通过将snap：true添加到javascript

来解决我的问题

＆＃13;
＆＃13; 
var x = null;
//Make element draggable
$(".drag").draggable({
    helper: 'clone',
    cursor: 'move',
    tolerance: 'fit',
    revert: true
});

$("#droppable").droppable({
    accept: '.drag',
    activeClass: "drop-area",
    drop: function (e, ui) {
        if ($(ui.draggable)[0].id != "") {


            x = ui.helper.clone();
            ui.helper.remove();
            x.draggable({
                helper: 'original',
                cursor: 'move',
                snap: true,
                //containment: '#droppable',
                tolerance: 'fit',
                drop: function (event, ui) {
                    $(ui.draggable).remove();
                }
            });
			
			

            x.resizable({
                maxHeight: $('#droppable').height(),
                maxWidth: $('#droppable').width()
            });
            x.addClass('remove');
            var el = $("<span><a href='Javascript:void(0)' class=\"xicon delete\" title=\"Remove\">X</a></span>");
            $(el).insertAfter($(x.find('img')));
            x.appendTo('#droppable');
            $('.delete').on('click', function () {
                $(this).parent().parent('span').remove();
            });
            $('.delete').parent().parent('span').dblclick(function () {
                $(this).remove();
            });
        }
    }
});

$("#remove-drag").droppable({
    drop: function (event, ui) {
        $(ui.draggable).remove();
    },
    hoverClass: "remove-drag-hover",
    accept: '.remove'
});
＆＃13; 
  .col {
      float: left;
      padding: 5px 5px 5px 5px;
      margin: 5px 5px 5px 5px;
  }
  #col1 {
      width: 200px;
      height: auto;
      border: 1px solid black;
  }
  img.drag {
      width: 40px;
      height: 40px;
      position: relative;
  }
  #droppable {
      width: 350px;
      height: 340px;
      border: 1px solid black;
  }
  .right {
      float: right;
  }
  .left {
      float: left;
  }
  .clear {
      clear: both;
  }
  ul li {
      list-style: none;
  }
  .drag-list img {
      width: 80px;
      vertical-align: middle;
      cursor: move;
  }
  .drag-list ul {
      margin: 0px;
      padding: 0px;
  }
  .drag-list li {
      margin-bottom: 5px;
  }
  .remove-drag-hover {
      background-color: #ED4949 !important;
  }
  .drop-area {
      background-color: #afd1b2;
  }
  .xicon {
      margin-top: 4px;
      position: absolute;
      margin-left: -17px;
      color: #FFF;
      font: message-box;
      text-decoration: none;
  }
  .xicon:hover {
      background-color: #fff;
      color: #000;
      width: 13px;
      height: 20px;
      text-align: center;
  }
  .tip {
      font-size: 12px;
      clear: both;
  }
＆＃13; 
<div id="wrapper">
    <div class="col" id="droppable"></div>
    <div class="col" id="col1">
        <div id="drag-list" class="drag-list">
            <ul>
                <li><span id="drag1" class="drag">
                        <img src="http://placehold.it/80x80/c9112d/fff&text=1" width="100%" height="100%" />
                    </span><span>Item 1</span> 
                </li>
                <li><span id="drag2" class="drag">
                        <img src="http://placehold.it/80x80/E68500/fff&text=2" width="100%" height="100%" />
                    </span><span>Item 2</span> 
                </li>
                <li><span id="drag3" class="drag">
                        <img src="http://placehold.it/80x80/00810C/fff&text=3" width="100%" height="100%" />
                    </span><span>Item 3</span> 
                </li>
                <li>
                    <div id="remove-drag" style="width: 100%; height: 80px; background-color: #FF8B8B;">
                        <div style="color: #fff; font-size: 20px; text-align: center; padding-top: 20px;">Remove
                            <div class="tip">Drop here</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

＆＃13;
＆＃13; 
var x = null;
//Make element draggable
$(".drag").draggable({
    helper: 'clone',
    cursor: 'move',
    tolerance: 'fit',
    revert: true
});

$("#droppable").droppable({
    accept: '.drag',
    activeClass: "drop-area",
    drop: function (e, ui) {
        if ($(ui.draggable)[0].id != "") {


            x = ui.helper.clone();
            ui.helper.remove();
            x.draggable({
                helper: 'original',
                cursor: 'move',
                //containment: '#droppable',
                tolerance: 'fit',
                drop: function (event, ui) {
                    $(ui.draggable).remove();
                }
            });
			
			

            x.resizable({
                maxHeight: $('#droppable').height(),
                maxWidth: $('#droppable').width()
            });
            x.addClass('remove');
            var el = $("<span><a href='Javascript:void(0)' class=\"xicon delete\" title=\"Remove\">X</a></span>");
            $(el).insertAfter($(x.find('img')));
            x.appendTo('#droppable');
            $('.delete').on('click', function () {
                $(this).parent().parent('span').remove();
            });
            $('.delete').parent().parent('span').dblclick(function () {
                $(this).remove();
            });
        }
    }
});

$("#remove-drag").droppable({
    drop: function (event, ui) {
        $(ui.draggable).remove();
    },
    hoverClass: "remove-drag-hover",
    accept: '.remove'
});
＆＃13; 
  .col {
      float: left;
      padding: 5px 5px 5px 5px;
      margin: 5px 5px 5px 5px;
  }
  #col1 {
      width: 200px;
      height: auto;
      border: 1px solid black;
  }
  img.drag {
      width: 40px;
      height: 40px;
      position: relative;
  }
  #droppable {
      width: 350px;
      height: 340px;
      border: 1px solid black;
  }
  .right {
      float: right;
  }
  .left {
      float: left;
  }
  .clear {
      clear: both;
  }
  ul li {
      list-style: none;
  }
  .drag-list img {
      width: 80px;
      vertical-align: middle;
      cursor: move;
  }
  .drag-list ul {
      margin: 0px;
      padding: 0px;
  }
  .drag-list li {
      margin-bottom: 5px;
  }
  .remove-drag-hover {
      background-color: #ED4949 !important;
  }
  .drop-area {
      background-color: #afd1b2;
  }
  .xicon {
      margin-top: 4px;
      position: absolute;
      margin-left: -17px;
      color: #FFF;
      font: message-box;
      text-decoration: none;
  }
  .xicon:hover {
      background-color: #fff;
      color: #000;
      width: 13px;
      height: 20px;
      text-align: center;
  }
  .tip {
      font-size: 12px;
      clear: both;
  }
＆＃13; 
<div id="wrapper">
    <div class="col" id="droppable"></div>
    <div class="col" id="col1">
        <div id="drag-list" class="drag-list">
            <ul>
                <li><span id="drag1" class="drag">
                        <img src="http://placehold.it/80x80/c9112d/fff&text=1" width="100%" height="100%" />
                    </span><span>Item 1</span> 
                </li>
                <li><span id="drag2" class="drag">
                        <img src="http://placehold.it/80x80/E68500/fff&text=2" width="100%" height="100%" />
                    </span><span>Item 2</span> 
                </li>
                <li><span id="drag3" class="drag">
                        <img src="http://placehold.it/80x80/00810C/fff&text=3" width="100%" height="100%" />
                    </span><span>Item 3</span> 
                </li>
                <li>
                    <div id="remove-drag" style="width: 100%; height: 80px; background-color: #FF8B8B;">
                        <div style="color: #fff; font-size: 20px; text-align: center; padding-top: 20px;">Remove
                            <div class="tip">Drop here</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题