通过点击按钮在元素内添加div

我在表格中有一个可拖动的div（使用jqueryui插件）。我可以拖动一个div并将其保存在<td id=” middle-side”></td>之内。现在我遇到了一些问题，试图创建额外的div，这些div也可以拖动并包含在<td id=” middle-side”></td>之内。我用来追加这个新的div的按钮不响应点击。我如何能够添加新的dragagble divs到<td id=” middle-side”></td>？ JSFIDDLE 通过点击按钮在元素内添加div

的Html

<td class="middle-side"> 
       Keep me inside here! 
        <div class="draggable" class="ui-widget-content"> 
         <p><b>Drag me around</b></p> 
        </div> 

      </td>

jQuery的

//To Drag 
$(function() { 
    $(".draggable").draggable({ containment: "parent" }); 
}); 


//To Add New Div 
var i = 0; 
var remove = true; // added this 
$('#button').click(function(e) { 
    $('<div/>').attr({ 
     'id' : i 
    }).addClass('draggale').css({ 
     'top' : e.pageY - 20, 
     'left' : e.pageX - 20 
    }).appendTo('.middle-side'); 
    i++; 
}); 

$('.middle-side').on('click','.draggable',function(){ // corrected spelling 
    if(remove){ 
     $(this).remove(); 
    } else { 
     //just to see if it was clicked 
     $(this).css({'background-color': 'red'}); 
    } 
});

来源

2014-08-27 Code_Ed_Student

你可以在div作为模板存储在你的。点击功能：

$('#button').click(function(e) { 
    $('<div class="draggable" class="ui-widget-content"><p><b>Drag me around</b></p></div>').draggable({ containment: "parent" }).appendTo('.middle-side'); 
});

更新小提琴：http://jsfiddle.net/0wbnud4k/3/

来源

2014-08-27 17:20:13 pizzasynthesis

试试这个：

$('#button').click(function(){ 
    $('.middle-side').append('<div class="draggable ui-widget-content"><p>text</p></div'); 
})

来源

2014-08-27 17:20:57 Vinc199789

这将是一个更好的答案，如果你解释为什么它的工作原理 – 2014-08-27 17:57:21

你在一个地方拼错拖动，也必须重新初始化可拖动的内容添加更多的人后。

Fiddle

$(function() { 
    $(".draggable").draggable({ containment: "parent" }); 
}); 

var i = 0; 
var remove = true; // added this 

$('#button').click(function(e) { 
    $('<div/>').attr({ 
     'id' : i 
    }).addClass('draggable').css({ 
     'top' : e.pageY - 20, 
     'left' : e.pageX - 20 
    }).appendTo('.middle-side'); 
    i++; 
    $(".draggable").draggable({ containment: "parent" }); 
}); 

$('.middle-side').on('click','.draggable',function(){ // corrected spelling 
    if(remove){ 
     $(this).remove(); 
    } else { 
     //just to see if it was clicked 
     $(this).css({'background-color': 'red'}); 
    } 
});

来源

2014-08-27 17:21:04 dezman

你在你的代码中有两处错误：

你拼错draggable
你没有重新绑定你的所有.draggable的div

这里的新代码：

$('<div/>').attr({ 
     'id' : i 
    }).addClass('draggable').css({ // Change CSS class 
     'top' : e.pageY - 20, 
     'left' : e.pageX - 20 
    }).appendTo('.middle-side'); 
// Re-bind all your draggable divs 
$(".draggable").draggable({ containment: "parent" });

见Fidddle：http://jsfiddle.net/thejsj/0wbnud4k/7/

来源

2014-08-27 17:22:19

首先，你必须在.addClass('draggale')一个错字，应该是.addClass('draggable')

其次，你还必须调用.draggable()在新的DIV使它可拖动

这里是一个更新fiddle

来源

2014-08-27 17:23:25

通过点击按钮在元素内添加div

回答

相关问题