用于数据的jQuery UI .on（＆＃39; draggable＆＃39;）

Question

在datatables的draggable上是否有类似这样的代码？

$('#schedulesUnAssigned').on('draggable ', 'td', {
    appendTo: 'body',
    containment: 'window',
    helper: 'clone',
    revert: true
});

我无法在谷歌中找到合适的代码。请帮助谢谢

Answer 1

可移动和可丢弃的Bacis

＆＃13;

＆＃13;

$("#launchPad").height($(window).height() - 20);
var dropSpace = $(window).width() - $("#launchPad").width();
$("#dropZone").width(dropSpace - 70);
$("#dropZone").height($("#launchPad").height());

$(".card").draggable({
    appendTo: "body",
    cursor: "move",
    helper: 'clone',
    revert: "invalid"
});

$("#launchPad").droppable({
    tolerance: "intersect",
    accept: ".card",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
        $("#launchPad").append($(ui.draggable));
    }
});

$(".stackDrop1").droppable({
    tolerance: "intersect",
    accept: ".card",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {        
        $(this).append($(ui.draggable));
    }
});

$(".stackDrop2").droppable({
    tolerance: "intersect",
    accept: ".card",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {        
        $(this).append($(ui.draggable));
    }
});

＆＃13;

body { 
    margin: 0;
}
#launchPad {
    float:left;
    border: 1px solid #eaeaea;
    background-color: #f5f5f5;
}
#dropZone {
    float:right;
    border: 1px solid #eaeaea;
    background-color: #ffffcc;
}
.card { 
    width: 150px; 
    padding: 5px 10px;
    margin:5px;
    border:1px solid #ccc;
    background-color: #eaeaea;
}
.stack {
    width: 180px;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    margin: 20px;
}
.stackHdr {
    background-color: #eaeaea;
    border: 1px solid #fff;
    padding: 5px 
}
.stackDrop1, .stackDrop2 {
    min-height:100px;
    padding: 15px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<div id="launchPad">    
    <div class="card">
        apple
    </div> 
    <div class="card">
        orange
    </div> 
    <div class="card">
        banana
    </div> 
    <div class="card">
        car
    </div> 
    <div class="card">
        bus
    </div> 
</div>

<div id="dropZone">
    <div class="stack">
        <div class="stackHdr">
            title 1 here 
        </div>
        <div class="stackDrop1">
            
        </div>
    </div>
    
    <div class="stack">
        <div class="stackHdr">
            title 2 here
        </div>
        <div class="stackDrop2">
            
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这很简单。你可以这样做：

$(document).ready(function() {
  $("table").find('td').draggable({
    appendTo: 'body',
    containment: 'window',
    helper: 'clone',
    revert: true
  });
});

<强> Online demo (fiddle)