Question

嗨，这是我正在编写wordpress文本编辑器的代码。在JSfiddle中编写代码时效果很好，但在wordpress中不起作用。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<div id="box"></div>
<div id="target"></div>
<style>
#box{ 
height: 20px;
width:20px; 
background-color:red;
}
#target{ 
height: 50px;
width: 50px; 
border: 1px solid red;
float:right;
}
#target.twinkle{ 

border: 5px solid green;
}
</style>


<script>
$(document).ready(function(){
$("#box").draggable();
$("#target").droppable({
 drop: function( event, ui ) {
   $( this )
      .addClass( "twinkle" ).html("dropped");

  }
});
});
</script>

可拖动工作，但当放在目标上时，它不会添加该类。

提前致谢。

Answer 1

尝试使用$替换jQuery。您通常必须在wordpress中执行此操作以避免与其他插件/主题/等使用$与其他内容冲突。

<script>
jQuery(document).ready(function(){
jQuery("#box").draggable();
jQuery("#target").droppable({
 drop: function( event, ui ) {
   jQuery( this )
      .addClass( "twinkle" ).html("dropped");

  }
});
});
</script>

Answer 2

您通常无法在WordPress编辑器中添加JavaScript，因为它会删除JavaScript。

但也有一些选择。在食典委中，有Using JavaScript条。您还可以使用this article中所述的短代码和自定义字段。

为什么这段代码不能在wordpress页面中运行？

2 个答案: