通過點擊按鈕在元素內添加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

回答

相關問題