使用JQuery拖放html表中的表行 [英] Drag and drop table rows in a html tables using JQuery

问题描述

实际上我已经在asp.net的html表中表示了数据
我有两个以上具有相同类名的表..我的要求是我必须将表行拖放到特定表中..通过使用以下jquery函数实现了这一点，但是我的问题是它允许删除在下一个表中，bcoz类名也相同..我想在同一表中拖放吗?

actually i have representing data in html tables in asp.net
i have more than two tables with same class names..my requirement is i have to drag and drop the table row in the particular table.. by using the following jquery function am implementing that, but my problem is that it is allowing to drop in the next table also bcoz class name is same..i wanted to drag and drop in the same table how?

<$(function() {
$(".coursetr").draggable({
        helper: "clone",
        revert: "invalid",
        refreshPositions: true
    });
    $(".coursetr").droppable({
    accept: ".coursetr",
    //placeholder: ".HeaderHomeActive",
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        drop: function(event, ui) {
            var draggable = ui.draggable, droppable = $(this),
            dragPos = draggable.position(), dropPos = droppable.position();
            draggable.css({
                left: dropPos.left + 'px',
                top: dropPos.top + 'px'
            });
            droppable.css({
                left: dragPos.left + 'px',
                top: dragPos.top + 'px'
            });
            var t1 = $(droppable).data('courseid');
            var t2 = $(draggable).data('courseid');
            draggable.swap(droppable);
          
        }
    });
});

推荐答案

( function (){

(" ).draggable({ 助手:" ， 恢复:" ， refreshPositions: true });

(".coursetr").draggable({ helper: "clone", revert: "invalid", refreshPositions: true });

(" ).droppable ({ 接受:" ， // 占位符:.HeaderHomeActive"， activeClass:" ， hoverClass:" ， 放置:功能(事件，用户界面){ var draggable = ui.draggable，droppable =

(".coursetr").droppable({ accept: ".coursetr", //placeholder: ".HeaderHomeActive", activeClass: "ui-state-hover", hoverClass: "ui-state-active", drop: function(event, ui) { var draggable = ui.draggable, droppable =

这篇关于使用JQuery拖放html表中的表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！