4
私はJquery UI関数を使用してドラッグ＆ドロッププラグインを作成しています。私が達成したすべては、ドラッグ可能なアイテムと落書き可能なエリアであり、これをうまく実装しました。Jqueryドラッグアンドドロップ（CKEditor）
私の次のステップは、作業中のプラグインをソースまたはデザインビューの両方のckeditor本体にドロップすることです。
私はこのコードを使用してドラッグドロップを行っています。
HTML
<div class="item" id="image">
<label class="title">Image</label>
<label class="price"></label>
</div>
<div id="cart_items" class="back"></div>
はJavaScript：
$("#cart_items").droppable({
accept: ".item",
//activeClass: "drop-active",
//hoverClass: "drop-hover",
drop: function(event, ui) {
var coordsp=[];
var coordsc=[];
var item = ui.draggable.html();
var itemid = ui.draggable.attr("id");
//alert(itemid);
var coordsp = $('#cart_toolbar').position();
var coordTopp = coordsp.top ;
var coordLeftp = coordsp.left;
//alert(itemid);
var coordsc = $('#'+itemid).position();
//alert(coordsc.top);
//alert(coordsc.left);
var coordTopc = coordsc.top ;
var coordLeftc = coordsc.left;
var coordLeft = coordLeftc-coordLeftp;
//var coordLeft = 0;
var coordTop = coordTopc-coordTopp;
//numControls++;
var numControls = document.getElementById('numControls');
controls_count += 1;
numControls.value = controls_count;
count += 1;
var hrml_sort_pre = '<div class="column" id="column1">';
if(itemid == "image")
{
var html = '<div class="dragbox" id="item'+count+'"><img src="<?=base_url()?>/css/move_arrow.gif" alt="no-image" class="drag-image"><h2 id="'+count+'" value="para_1" onclick="do_collapse(this);" onmouseup="do_fill_data(this.id);" onmouseover="fetch_editor_data(this.id);" > </h2><div style="float:right;margin-top:-20px;margin-right:4px"><a onclick="remove_item(\'item'+count+'\')" id="remove'+itemid+count+'" class="remove'+itemid+count+' x-button"> </a></div><div class="dragbox-content" ><div id="item_cart_'+count+'" style=" position: relative; left: 0px; top:-2px;width:100%;">';
html = html + '<a id="image_'+count+'" href="<?=base_url()?>index.php/media/index/'+count+'" ><img src="<?=base_url()?>images/na.jpg" id="temp_image_'+count+'" name="para_'+count+'" onclick="box_load(\'image_'+count+'\')" title = " " alt = "" /></a><input type="hidden" name="control_type[]" value="image" /><input type="hidden" id="input_temp_image_'+count+'" name="content[]" value="" /> <input type="hidden" name="image-para[]" value="" /></div></div></div>';
}
$("#cart_items").append(html); }}
我々はエディタで画像のhtmlをドロップし、その上にいくつかの関数を呼び出すためにこれを使用することができますどのような方法があります。事前